如何将用户生成的嵌套SVG上传至服务器实现后续访问与编辑

前端修改方案 #

方式1：基于jQuery AJAX（补全你之前尝试的写法） #

直接修改现有的downloadSVGAsText函数，新增上传逻辑即可，原有下载功能可保留：

function downloadSVGAsText() {
    const svg = document.querySelector('svg');
    const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML)));
    // 原有下载逻辑
    const a = document.createElement('a');
    const e = new MouseEvent('click');
    a.download = 'download.svg';
    a.href = 'data:image/svg+xml;base64,' + base64doc;
    a.dispatchEvent(e);

    // 新增上传逻辑
    $.ajax({
        url: './save_svg.php', // 替换为你自己的PHP接收文件路径
        type: 'POST',
        data: {
            svg_base64: base64doc,
            file_name: 'user_' + Date.now() + '.svg' // 自定义文件名避免覆盖
        },
        success: function(res) {
            console.log('上传成功：', res);
        },
        error: function(err) {
            console.error('上传失败：', err);
        }
    })
}

方式2：原生JS实现（不需要依赖jQuery） #

如果项目没有引入jQuery，可以用原生fetch方法实现相同效果，替换上面的jQuery AJAX部分即可：

fetch('./save_svg.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: 'svg_base64=' + encodeURIComponent(base64doc) + '&file_name=user_' + Date.now() + '.svg'
}).then(res => res.text())
.then(res => {
    console.log('上传成功：', res);
}).catch(err => {
    console.error('上传失败：', err);
})

后端PHP接收代码（对应上方的save_svg.php） #

<?php
// 接收前端传参
$svgBase64 = $_POST['svg_base64'] ?? '';
$fileName = $_POST['file_name'] ?? 'default_' . time() . '.svg';
// 存储目录需提前创建，且设置为可写入权限（建议权限755）
$saveDir = './svg_uploads/';
$savePath = $saveDir . $fileName;

if (empty($svgBase64)) {
    die('参数错误：SVG内容为空');
}

// 解码base64并写入文件
$svgContent = base64_decode($svgBase64);
if (file_put_contents($savePath, $svgContent)) {
    echo '文件保存成功，访问地址：' . $savePath;
} else {
    echo '写入失败，请检查存储目录权限';
}
?>

注意事项 #

• 提前在PHP文件同级目录创建svg_uploads文件夹，Linux服务器需给该文件夹开放写入权限，否则会出现写入失败的问题
• 正式上线时建议增加内容校验，确认解码后的内容为合法SVG格式，避免恶意文件上传
• 文件名建议叠加用户ID、随机字符串等唯一标识，避免同名文件覆盖

内容的提问来源于stack exchange，提问作者Jafle