最好将图像文件从浏览器上传到服务器作为数据URI还是二进制格式数据？

Question

在网络应用程序中，我使用Cropit让用户上传和裁剪图像。然后我需要将此图像上传到后端服务器。

Cropit返回Data URI format中的裁剪图像（类型为string）。

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

到目前为止，我已经找到了两个选项：

1. 从客户端发送数据URI作为简单字符串，然后将其转换为服务器上的二进制数据，并将映像保存到磁盘。
2. 在客户端上将数据URI转换为二进制文件并将其附加到FormData输入，然后将其发送到服务器，并将映像保存到磁盘。

如果我理解正确，那就没有本地JS方式将数据URI作为multipart/form-data发送。这是正确的吗？

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

谢谢！

Answer 1

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

我发现最快最可靠的方法是将图像转换为数据uri。

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

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

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

Answer 2

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

1. 正如您提到的使用数据格式，您可以将其写入服务器端逻辑中的文件（因为我不确定您使用的服务器端技术）
2. 另一种方法可以是在服务器端使用CLI工具图像魔术（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方法，因为它将在客户端机器上运行，并且比服务器端更快地创建文件。

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