在任何项目中，图片的上传都是很常用的功能，在html5未普及之前，人们用插件来实现这个功能，比如jquery.fileupload.js，这些插件虽然功能强大，但是总觉得挺麻烦。如果你的功能的浏览器要求是在IE10以上，那么不妨用html5的FileReader对象来实现。
实现流程：
获取上传的文件;
使用FileReader读取图片，并新建一个Image对象将FileReader读取的图片数据放进去;
使用canvas将Image对象等比缩放并写入到画布中，保存为base64格式的数据(这里使用的是FormData对象上传，其实这里已经可以直接将base64的数据通过ajax使用post方法上传到服务器，即可避免下面两个步骤);
新建一个Blob对象将base64数据放入;
使用FormData对象上传到第三方云储存服务器;
使用HTML原生上传图片，下面是踩的一些小坑：
accept设定上传文件的类型，这里直接用image/*，不指定具体的后缀名，否则部分安卓手机下无法上传图片;
添加multiple属性可选取多张图片(本例只做选取单张图片);
capture="camera"属性可以调用摄像头(添加此属性在iPhone下会直接调用摄像头，而不会读取相册;且目前安卓和ios设备使用accept="image/*"均可选择使用摄像头拍照还是使用相册的图片，所以该属性可以忽略)。
当input文件触发change事件后获取上传的文件
functionaddPic(e){
if(typeofFileReader==='undefined'){
returnalert('你的浏览器不支持上传图片哟!');
}
varfiles=e.target.files||e.dataTransfer.files;
if(files.length>0){
imgResize(file[0],callback);
}
}
使用FileReader获取图片数据，并使用canvas压缩
ios手机拍照会旋转90度，这里必须判断是否ios手机做出相应处理后再上传
functionimgResize(file,callback){
varfileReader=newFileReader();
fileReader.onload=function(){
varIMG=newImage();
IMG.src=this.result;
IMG.onload=function(){
varw=this.naturalWidth,h=this.naturalHeight,resizeW=0,resizeH=0;
//maxSize是压缩的设置，设置图片的最大宽度和最大高度，等比缩放，level是报错的质量，数值越小质量越低
varmaxSize={
width:500,
height:500,
level:0.6
};
if(w>maxSize.width||h>maxSize.height){
varmultiple=Math.max(w/maxSize.width,h/maxSize.height);
resizeW=w/multiple;
resizeH=w/multiple;
}else{
//如果图片尺寸小于最大限制，则不压缩直接上传
returncallback(file)
}
varcanvas=document.createElement('canvas'),
ctx=canvas.getContext('2d');
if(window.navigator.userAgent.indexOf('iPhone')>0){
canvas.width=resizeH;
canvas.height=resizeW;
ctx.rorate(90*Math.PI/180);
ctx.drawImage(IMG,0,-resizeH,resizeW,resizeH);
}else{
canvas.width=resizeW;
canvas.height=resizeH;
ctx.drawImage(IMG,0,0,resizeW,resizeH);
}
varbase64=canvas.toDataURL('image/jpeg',maxSize.level);
convertBlob(window.atob(base64.split(',')[1]),callback);
}
};
fileReader.readAsDataURL(file);
}
将base64的数据转换成一个Blob对象
安卓手机不支持Blob构造方法
functionconvertBlob(base64,callback){
varbuffer=newArrayBuffer(base64.length);
varubuffer=newUint8Array(buffer);
for(vari=0;i
ubuffer[i]=base64.charCodeAt(i)
}
varblob;
try{
blob=newBlob([buffer],{type:'image/jpg'});
}catch(e){
window.BlobBuilder=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder;
if(e.name==='TypeError'&&window.BlobBuilder){
varblobBuilder=newBlobBuilder();
blobBuilder.append(buffer);
blob=blobBuilder.getBlob('image/jpg');
}
}
callback(blob)
}
使用HTML5的FormData对象上传数据
functioncallback(fileResize){
vardata=newFormData();
data.append('file',fileResize);
varconfig={
headers:{'Content-Types':'multipart/form-data'}
};
//这里用的es6语法发起请求，可以无视
axios.post(url,data,config).then().catch(e){}
}
网友评论