如何将用户生成的 svg 上传到服务器？

Question

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

我为用户构建了一个 HTML 和 Javascript 站点，通过在表单中​​输入尺寸来创建车辆的基本模型。

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

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

输出 javascript 已被证明可以正常工作，但我无法弄清楚如何以任何方式将该输出发送到服务器上。

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

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

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

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

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

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>

简化的 JSFiddle

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

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

Answer 1

这是一个非常笼统的问题。 我认为使用 AJAX 是一个很好的方法。 您应该能够将 SVG 放在 POST 正文中：

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

然后使用$svgString = file_get_contents('php://input'); 来获取body的内容，这样可以省去很多编码和解码的工作。 剩下的就看你了。