H5上传图片
最近做产品小A的需求，设计到图片的上传问题，整理一下。
PC上传图片
基本结构
- form[enctype="multipart/form-data"]
- input[type="file"]
- 上传完毕后，获取图片url，显示到页面上
问题
- 图片要上传完毕后，才能显示
- 压缩上传
H5 如何解决
- FileReader
- canvas
FileReader
FileReader可以将File对象转化成base64，这样可以优先展示图片，然后处理上传操作。
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
$('img').attr('src', e.target.result);
};FormData
实际的上传操作，大多是ajax处理的，FormData可以用来构建form表单。
var fd = new FormData();
fd.append('filename', file);
$.ajax({
url: 'xxxx/yyyy',
data: fd,
type: 'POST',
cache: false,
processData: false,
contentType: false,
dataType: 'json',
success: function(data) {
},
error: function() {
}
});canvas
手机的流量是宝贵的，但是上传个一张照片可能有几M，所有需要对图片进行压缩处理，canvas对图片的操作是通过base64格式处理的。
var img = new Image();
img.src = base64;
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext("2d").drawImage(img, 0, 0);
var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}上传base64
使用mqq接口拍照或者获取本地图片时，反馈都是base64格式，input在处理过程中，经过压缩等操作也可能将File对象转化成base64，对base64的上传支持有以下方案：
- server支持，单独开接口处理base64上传
- 前端将base64转化成File对象，复用原来的server接口
这里重点讨论第2中方案。JS提供了Blob对象，是一个类文件对象，File对象继承了Blob对象，并且做了一些扩展。基于此，只需要把base64转化成Blob对象即可。Blob的构造参考这里，可以使用类型数据来处理。
// 解码base64
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// 类型数组
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录