vue 上传图片

本文介绍如何使用 Vue.js 实现图片上传功能,并通过 base64 编码进行图片预览。主要内容包括:利用 input 标签的 change 事件获取用户选择的文件;通过 FileReader API 将文件转换为 base64 编码;限制图片大小并调整分辨率以适应不同需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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. },  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值