javascript - 发布 base64 数据 JavaScript/jQuery

Question

我正在开发一个允许用户编辑照片(在浏览器中)然后上传的网站。为了在浏览器中编辑图像，我使用了一些在 base64 中处理图像的 JavaScript 库。因此，要将图像发布到我的服务器，不能使用带有文件输入的简单表单。隐藏输入的值设置为已编辑图像的 base64 字符串，并已发布。请参阅以下简短示例。

http://pastebin.com/PrfWaS3D

显然，这已经精简了很多，但它确实包含了我遇到的问题。在 POST 一个 3MB 的动画 GIF 中，用了 6.5 分钟。在此期间，我的电脑几乎完全死机/无响应。 (注意:不过，这非常适合小图像)

这可能是操作系统/浏览器问题(Ubuntu 上的最新 Google Chrome)，但我对此表示怀疑。如果我将该文件输入放入表单中，并删除数据的 base64 转换(即 - 文件的标准 POSTing)，它会在大约一秒钟内完成。

将 6.5 分钟与 1 秒进行比较。我一定是做错了什么。我在这里做错了什么？我应该怎么做呢？我对网络开发还很陌生，所以我有点一头雾水。我知道 base64 确实会导致大小增加 1.3 倍，但显然这里的上传时间没有按 1.3 倍缩放。我做了一些 console.logging 和

var base64 = reader.result;

大约需要一秒钟。所以我不认为瓶颈在那里。瓶颈必须在上传中。但为什么？为什么表单文件输入如此比使用 base64 的表单隐藏输入快得多？

对于我冗长的帖子，我深表歉意，但我还是网络开发的新手，真的不理解我的问题，因此很难在传达所有信息时保持简洁。

谢谢

Answer 1

既然您使用的是现代 JS API，那么最好使用:

• URL.createObjectURL()从 Blob 创建 URL(比数据 URL 更快且更易于检查)
• btoa() base64 编码字符串(不再需要)
• FormData创建一个 POST 请求
• XHR2 将其发送到服务器(甚至包括进度!)

所以像这样:

1. 获取文件:
   file = input.files[0]
2. 转换为类型化数组，施展魔法，再转换回 Blob:
   blob = <magic here>
3. 创建帖子:
   fd = new FormData; fd.append('file', blob, 'image.png');
4. 上传:
   xhr = new XMLHttpRequest; ... xhr.send(fd);