vue 上传图片

vue 用 file 的 change获取到上传文件的基本信息

[html]  view plain  copy

1. <input type="file" name="file" class="upload__input" @change="uploadChange" accept="image/png,image/gif">  

[html]  view plain  copy

1. <div class="imgSrc">  
2. <span style="white-space:pre;"> </span><img :src="imgDataUrl" >  
3. </div>  

然后拿到图片后用 beta64 转化预览图片

[javascript]  view plain  copy

1. uploadChange(event){  
2.     if(event.target.files.length>0){  
3.         this.files = event.target.files[0];  //提交的图片  
4.         this.$conf.getBase64(event.target,(url)=>{  
5.             this.imgDataUrl = 'data:image/png;base64,'+url;   //显示的图片  
6.         });   
7.     }  
8.           
9. },  

beta64方法

[javascript]  view plain  copy

1.   

[javascript]  view plain  copy

1. getBase64 : function(file,callback){  
2.             var maxWidth = 640;  
3.             if(file.files && file.files[0]){  
4.                 var thisFile = file.files[0];  
5.                 if(thisFile.size>2019200){  
6.                     // mualert.alertBox("图片不能超过800K");  
7.                     alert("图片不能超过2M");  
8.                     return  
9.                 };  
10.                 var reader = new FileReader();  
11.                 reader.onload = function(event){  
12.                     var imgUrl = event.target.result;  
13.                     var img = new Image();  
14.                     img.onload = function(){  
15.                         var canvasId = 'canvasBase64Imgid',  
16.                         canvas = document.getElementById(canvasId);  
17.                         if(canvas!=null){document.body.removeChild(canvas);}  
18.                         var canvas = document.createElement("canvas");  
19.                         canvas.innerHTML = 'New Canvas';  
20.                         canvas.setAttribute("id", canvasId);  
21.                         canvas.style.display='none';  
22.                         document.body.appendChild(canvas);  
23.                         canvas.width = this.width;  
24.                         canvas.height = this.height;  
25.                         var imageWidth = this.width,   
26.                         imageHeight = this.height;  
27.                         if (this.width > maxWidth){  
28.                             imageWidth = maxWidth;  
29.                             imageHeight = this.height * maxWidth/this.width;  
30.                             canvas.width = imageWidth;  
31.                             canvas.height = imageHeight;  
32.                         }  
33.                         var context = canvas.getContext('2d');  
34.                         context.clearRect(0, 0, imageWidth, imageHeight);  
35.                         context.drawImage(this, 0, 0, imageWidth, imageHeight);  
36.                         var base64 = canvas.toDataURL('image/png',1);  
37.                         var imgbase = base64.substr(22);  
38.                         callback(imgbase)  
39.                         //this.imgUrl =   
40.                     }  
41.                     img.src = imgUrl;  
42.                 }  
43.                 reader.readAsDataURL(file.files[0]);  
44.             }  
45.         },  

提交表单

[javascript]  view plain  copy

1. addSub(){  
2.     let data  = {};  
3.     let files = this.files;  
4.     let param = new FormData(); //创建form对象  
5.     if(files!=''){  
6.         param.append('file', files,files.name); //单个图片 ，多个用循环 append 添加  
7.     }else{  
8.         this.$message.error('请添加图片');  
9.     }  
10.     param.append('param', JSON.stringify(data));//添加form表单中其他数据  
11.     let config = {  
12.         headers:{'Content-Type':'multipart/form-data'}  
13.     };  //添加请求头  
14.     this.$ajax.post(this.ajaxUrl +'addStation',param,config)  
15.       .then(response=>{  
16.         var ret = response.data;  
17.         if(ret.status){  
18.               
19.             this.$message({  
20.                 message : '新增成功',  
21.                 type : 'success'  
22.             })  
23.             //清空数据  
24.             this.imgDataUrl = '';  
25.             this.files = [];  
26.         }else{  
27.             this.msg(ret.msg);  
28.         }  
29.     })    
30. },