【问题标题】：How can I upload user-generated svg to the server?如何将用户生成的 svg 上传到服务器？
【发布时间】：2021-12-23 08:58:25
【问题描述】：

花了三天时间研究并未能将用户生成的 svg 上传到服务器，我完全被难住了。

我已经建立了一个 HTML 和 Javascript 网站，供用户通过在表单中输入尺寸来创建车辆的基本模型。

然后使用这些尺寸来编辑每个 svgs 'x' 和 'y' 坐标。

我已经成功地将嵌套的 svg 转换为 base64，然后使用按钮下载到用户文件系统（尽管它不适用于 JSFiddle），并且还尝试将文件保存到本地存储。

已证明输出 javascript 工作得非常好，但我就是不知道如何以任何方式将该输出发送到服务器上。

我希望能够让用户将他们编辑的 svg 提交到服务器，然后我可以在另一个页面上引用它。

我对服务器端代码和实践相当不熟悉，但到目前为止已经尝试了以下常见建议：

  $.ajax({
  url: ajaxurl,
  type: 'POST',...

以及接收 svg 的 PHP 代码的各种迭代。

到目前为止，这是我网站的（大部分）工作小提琴。

JSFiddle

编辑以获得更好的上下文

这是我试图导出到服务器的嵌套 svg 的一个非常简化的版本

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" id="Layer_1">
    <rect id="rect1"/>
    <rect id="rect2"/>
</svg>

导出附加到此按钮

<button id="downloadSVG">Download</button>

然后是导出脚本

 <script>
                    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);
                    }

                    const downloadSVG = document.querySelector('#downloadSVG');
                    downloadSVG.addEventListener('click', downloadSVGAsText);

                </script>

Simplified JSFiddle

我完全不知道如何将嵌套的 svg 发布到服务器，以便用户以后可以编辑或使用它。

到目前为止，我知道我需要 Ajax 将 Base64 图像从 javascript 传递到服务器上的 PHP 文件，然后 PHP 文件会将图像放在服务器上。我只是似乎无法让它工作。主要问题是如何将生成的 Base64 转换为 PHP。其余的我很乐意锻炼。

【问题讨论】：

请分享更多详细信息，例如您正在使用的代码。 究竟是什么不起作用？这是 JS 问题（您难以发送正确的请求）还是 PHP 问题（您难以正确处理）？另外，你确定这个问题真的和 SVG 本身有关吗（因为到目前为止你还没有分享任何 SVG 相关的代码）？
请将所有相关代码放入您的问题中，而不是放入任何外部网站。另外，请将代码减少到导致问题的那些部分，并省略所有周围的部分 - 即使它们是您的应用程序的一部分，仅使用相关部分可能会更容易理解您的问题
抱歉，我很少在这里发帖提问。希望一切都解决了。
您缺少的是您要将数据发送到的此服务器上运行的内容。它不只是神奇地出现在服务器上并写入磁盘。您需要服务器端代码来执行此操作。
“主要问题是如何将生成的 Base64 转换为 PHP” - 您尝试过什么？您是否正在为发送请求（包含该数据）或在服务器上正确处理它而苦苦挣扎？

标签： javascript php ajax svg server

【解决方案1】：

这是一个非常笼统的问题。我认为使用 AJAX 是一个不错的方法。您应该可以将 SVG 放入 POST 正文中：

$.ajax('url',{
    'data': svg.outerHTML,
    'type': 'POST',
    'processData': false,
    'contentType': 'image/svg+xml'
});

然后使用$svgString = file_get_contents('php://input');来获取body的内容，这样可以为你节省大量的编码和解码。剩下的就看你自己了。

【讨论】：