POST base64数据JavaScript/jQuery

Question

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

http://pastebin.com/PrfWaS3D

显然,这是非常简单的,但它确实包含了我遇到的问题.在发布3MB动画GIF时,花了6.5分钟.在此期间,我的电脑几乎完全冻结/反应迟钝.(注:此作品完美的小图像,虽然)

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

比较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() to base64编码一个字符串(不再需要)
• FormData 创建POST请求
• XHR2将它发送到服务器(甚至包括进度!)

所以像这样:

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