上传图片
vue 2017-12-11 11:12:41

 

XML/HTML Code复制内容到剪贴板
  1. <div class="fr submit-btn">  
  2.   上传  
  3.   <input type="file" accept="image/*" class="uploadImageInput sub-img" id="uploadImageInput" @change="uploadImage($event)">  
  4. </div>  

 

JavaScript Code复制内容到剪贴板
  1. uploadImage(event) {    
  2.     // 上传图片    
  3.     let files = event.target.files || event.dataTransfer.files;    
  4.     if(!files.length) return;    
  5.     
  6.     this.createImage(files);    
  7. },    
  8. createImage(file) {    
  9.     
  10.     let vm = this;    
  11.     vm.$indicator.open(); //loading    
  12.     if(typeof FileReader === "undefined") {    
  13.         alert("您的浏览器不支持图片上传，请升级您的浏览器");    
  14.         return false;    
  15.     }    
  16.     
  17.     let image = new Image();    
  18.     let leng = file.length;    
  19.     let reader = new FileReader();    
  20.     let userId = vm.$store.state.common.userId;    
  21.     let publishId = vm.publishId;    
  22.     
  23.     reader.readAsDataURL(file[0]);    
  24.     reader.onload = function(e) {    
  25.         let params = {  
  26.            "images":e.target.result,  
  27.            "userId":userId,  
  28.            "publish_id":publishId  
  29.        };    
  30.     
  31.         vm.request.post(vm.$store.state.cms.api.uploadCoverImage, params).then(response => {    
  32.     
  33.             let res = response.data;    
  34.             if(res.code == 0) {    
  35.                 // 更改封面图片路径    
  36.                 vm.coverImage = res.data;    
  37.             } else {    
  38.                 vm.$toast(res.msg);    
  39.             }    
  40.     
  41.             vm.$indicator.close();    
  42.     
  43.         }, response => {    
  44.     
  45.             vm.$indicator.close(); //关闭loading      
  46.             vm.$toast("网络连接失败");    
  47.     
  48.         })    
  49.     
  50.     };    
  51. },    

 

加一个判断图片格式的：

JavaScript Code复制内容到剪贴板
  1. uploadImage(event) {  
  2.     // 上传图片  
  3.     let files = event.target.files || event.dataTransfer.files;  
  4.     if(!files.length) return;  
  5.   
  6.     let type = files[0].type;  
  7.   
  8.     if(type.indexOf("/") > 0) //如果包含有"/"号  
  9.     {  
  10.         type = type.split("/");  
  11.         type = type[1];  
  12.         console.log(type);  
  13.         if(!/\.(gif|jpg|jpeg|bmp)$/.test(type)) {  
  14.             alert("图片类型必须是.gif,jpeg,jpg,bmp中的一种")  
  15.             return false;  
  16.         }  
  17.     }  
  18.   
  19.     this.createImage(files);  
  20.   
  21. },  

 

其实只要input上面加一个

XML/HTML Code复制内容到剪贴板
  1. <input type="file" accept="image/*">  

 

多图上传：

https://segmentfault.com/a/1190000006860258

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/251.html

上一篇 mint-ui Navbar
下一篇 vue 富文本编辑器
相关的文章
Powered by yoyo苏ICP备15045725号