1、使用vue-resource上传，也可以自定义ajax上传；
2、使用<input type="file" @change="submit()" name="multipart" class="element" accept="image/*" id="headerImage">标签，在submit的时候执行方法
3、正式代码 let oFiles = document.querySelector("#headerImage").files;
4、压缩图片：
1 modify_img_size (path, obj, callback) { 2 3 //path可以是相对路径，也可以是base64位，我这里传的是bse64位 4 var img = new Image(); 5 img.src = path; 6 7 img.onload = function () { 8 //图片加载初始化执行 9 10 var that = this;11 var w = that.width,12 13 h = that.height,14 scale = w / h;15 w = obj.width || w;16 h = obj.height || (w / scale);17 //图片的质量为0.5，越小越模糊，文件也就越小18 var quality = 0.5; 19 20 //创建canvas画图21 var canvas = document.createElement('canvas');22 var ctx = canvas.getContext('2d');23 24 var anw = document.createAttribute("width");25 anw.nodeValue = w;26 var anh = document.createAttribute("height");27 anh.nodeValue = h;28 canvas.setAttributeNode(anw);29 canvas.setAttributeNode(anh);30 31 ctx.drawImage(that, 0, 0, w, h);32 33 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {34 quality = obj.quality;35 }36 37 var base64 = canvas.toDataURL('image/jpeg', quality);38 39 callback(base64);40 }41 42 }
5、读取二进制（base64位信息），let zipReady = new FileReader(); zipReady.readAsDataURL(oFiles[0]); 初始化读取base64，上传、预览：
1 let _that = this; 2 3 zipReady.onload = function (e) { //初始化开始 4 5 //调用压缩方法，e.target.result为压缩结果 ， {width: 1000}为压缩后宽度，resImg为压缩之后的base64位回调函数结果 6 7 _that.modify_img_size(e.target.result, {width: 1000}, function (resImg) { 8 9 10 //转为8 位无符号整数值的类型化数组，存为图片信息，有返回值11 function dataURItoBlob(dataURI) { 12 13 14 var byteString;15 if (dataURI.split(',')[0].indexOf('base64') >= 0)16 byteString = atob(dataURI.split(',')[1]);17 else18 byteString = unescape(dataURI.split(',')[1]);19 // separate out the mime component20 var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];21 // write the bytes of the string to a typed array22 var ia = new Uint8Array(byteString.length);23 for (var i = 0; i < byteString.length; i++) {24 ia[i] = byteString.charCodeAt(i);25 }26 27 console.info(ia);28 return new Blob([ia], {type:mimeString});29 }30 31 //**********************************************************32 33 34 var blob = dataURItoBlob(resImg); //将base64做处理35 36 37 let formDataImg = new FormData();38 39 formDataImg.append('multipart', blob, oFiles[0].name);40 //将从内存中读取处理之后的数据流blob插入form表单中，记得要给它取个名字，否则后端不能识别，我这里去的是原始图片的名字41 42 formDataImg.append('accessToken', aToken);43 44 //如果查过2M则提示图片太大，返回45 if (resImg.length > 2097152) {46 47 Toast(_that.$t('message.myInfo.tobig'))48 49 return true50 }51 52 53 // 预览图片，用户选择一次不满意，要重先选择，则要删掉这个img标签，重先创建一个img54 let getTempImgNode = document.getElementById('tempImg');55 if (getTempImgNode) {56 getTempImgNode.remove();57 58 }59 60 61 HTTP.postImg('/gate/v1/userExpandInfo/updateHeadPortrait', formDataImg).then(res => {62 63 if (res.code == 0) {64 65 66 //上传成功之后，再次读取base64信息，创建img，生成预览67 let rdader = new FileReader();68 rdader.readAsDataURL(oFiles[0]);69 70 rdader.onload = function (e) {71 72 let getPicParent = document.getElementById('changePic');73 let newNode = document.createElement('img');74 newNode.setAttribute('id', 'tempImg');75 newNode.setAttribute('src', e.target.result);76 77 getPicParent.appendChild(newNode)78 79 };80 81 82 return true;83 } else {84 Toast(_that.$t('message.code[' + res.code + ']'));85 86 }87 88 })89 90 })91 92 };