最好将图像文件从浏览器上传到服务器作为数据 URI 或二进制表单数据？

Question

在一个网络应用程序中，我使用Cropit 让用户上传和裁剪图像。然后我需要把这张图片上传到后端服务器。

Cropit 在Data URI format（输入string）中返回裁剪后的图像。

我的问题是：现在将裁剪后的图像上传到后端服务器的最佳方式是什么？

到目前为止，我在这里找到了两个选项：

1. 从客户端以简单字符串的形式发送Data URI，然后在服务器上将其转换为二进制数据，并将图像保存到磁盘。

2. 在客户端将 Data URI 转换为二进制并将其附加到 FormData 输入，然后将其发送到服务器，并将图像保存到磁盘。

如果我理解正确，没有原生的 JS 方法可以将数据 URI 作为multipart/form-data 发送。是这样吗？

使用方法 1 或 2 是否更好（即性能更高/更安全）？或者最好以我没有提到的其他方式来做？

谢谢！

Answer 1

最好的方法是通过 post 方法发送 Data uri

我发现最快最可靠的方法就是把图片转成数据uri。

使用分段上传可能会出现发送数据和编码正确值的问题，并且会变得一团糟。以我们今天拥有的资源，数据 URI 是最好的建议

编辑：根据您使用的服务器类型，使用分段上传可能是更明智的选择。例如，AWS lambda 可能只允许请求中包含 5mb 的数据。这意味着最好的选择是使用预签名 URL 并通过 S3 进行多部分上传，这应该通过前端 Web 部分进行处理。

基本上正确的解决方案取决于您的架构。

Answer 2

希望您了解使用基于 HTML5 画布的图像编辑的问题，适用于各种图像尺寸、画布尺寸和图片质量。

1. 正如您提到的使用数据格式，您可以将其写入服务器端逻辑中的文件（因为我不确定您使用的服务器端技术）
2. 另一种方法是在服务器端使用 CLI 工具 image magic(http://www.imagemagick.org/) 来处理图像。即，将带有附加信息的文件上传到服务器以编辑图像，并在服务器上对其进行处理。要从客户端收集编辑信息，您可以使用任何客户端 JavaScript 库，例如 (http://odyniec.net/projects/imgareaselect/)

Answer 3

正如您所说，我们可以使用服务器将数据 url 保存为文件，也可以使用以下代码使用 JavaScript 将其保存在本地

使用 PHP ：

$uri_ = 'data://' . substr($uri, 5);
$binary = file_get_contents($uri_);

通过 JavaScript 引用此github

最好的办法是 如果您想在用户完成图像编辑后立即将该文件提供给用户下载，那么请使用 JavaScript 方法，因为它将在客户端计算机上运行并比服务器端更快地创建文件。

如果您想将该文件保存在服务器中以供下次使用，请使用服务器端编码创建文件。