素材牛VIP会员
HTML5 上传图片 的几种方式的疑惑
 逆***团  分类:Html5  人气:1120  回帖:2  发布于6年前 收藏

关于图片上传flash的方式不谈。通过查看各种上传插件发现 利用ajax传输图片,貌似有三种方式,不知道这三种方式的区别和兼容性问题在哪里。

第一种为 formData 方式,直接把input的file,apppend到formData对象中。最后调用xhr的send(formDate)即可传输图片。(大部分是此种方式)

第二种为 base64 方式 ,利用FileReader 对象的readAsDataURL(file); 读出 base64的图片,最后调用xhr的send(base64)即可传输图片。 (七牛支持这种上传)

第三种 为base64转二进制和formData 结合的, 先是将base64的图片url数据转换为Blob,然后append到formData对象中再发送。 为什么要多此一举? (利用FileReader和FormData实现图片预览和上传(base64转二进制文件 http://blog.csdn.net/hsany330...)

请大师们给解个惑 实在想不明白了

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv5 码农
龙***爸 Linux系统工程师 6年前#1

我只看见你你最后的问号。我只想说接口支持的类型,是要string还是file。转来转去不就是转成接口支持的类型。

Lv7 码师
15***by 产品经理 6年前#2
  1. 我觉得从上传方式来分的话只有用FormData和不用FormData的区别吧,用的好处是可以轻松的封装Blob上传(大文件还能利用blob分片),不用的话通常是放弃Blob方案了。

  2. base64一般作为备选方案,因为二进制文件用这货编码的话,会比原文件还大。

  3. 需要先转成base64再转成blob的原因是,前端压缩都是用Canvas方案,先绘制再读取。Canvas本来有个可以直出blob的toBlob()方法,但是浏览器支持不太理想,所以只能先调toDataURL()转成base64,再回填到blob里,曲线救国。

  4. 可能是移动端做的多吧,我个人更倾向于先在前端压缩下再上传的方案,因为一方面,客户端的性能都是足够处理的,客户端处理好也不会麻烦服务器;另一方面,更小的文件上传也会更快,从而增强用户体验。

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取