Vue.js怎么实现文件上传压缩优化

本篇内容介绍了“Vue.js怎么实现文件上传压缩优化”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

vue js实现文件上传压缩优化处理

两种方法 ：

• 第1种是借助canvas的封装的文件压缩上传

• 第2种（扩展方法）使pressorjs第三方插件实现

下面来详细介绍两种方法：

借助canvas的封装的文件压缩上传

封装之前，先要对canvas相关的方法有所了解

<canvas>简单实例如下:

<canvasid="myCanvas"width="200"height="100"></canvas>

注意:标签通常需要指定一个id属性 (或者其他), width 和 height 属性定义的画布的大小.

使用 style 属性来添加边框:

<canvasid="myCanvas"width="200"height="100"></canvas>

1.新建imgUpload.js

将base64转换为file文件

constdataURLtoFile=(dataurl,filename)=>{letarr=dataurl.split(',')letmime=arr[0].match(/:(.*?);/)[1]letbstr=atob(arr[1])letn=bstr.lengthletu8arr=newUint8Array(n)while(n--){u8arr[n]=bstr.charCodeAt(n)}returnnewFile([u8arr],filename,{type:mime})};

使用canvas的方法实现（拓展）

drawImage() 方法在画布上绘制画布。

在画布上定位图像：

context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：剪切图像，并在画布上定位被剪切的部分：

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

canvas的toDataURL()方法是返回一个包含图片展示的 数据URL。可以使用type参数其类型，默认为png格式

canvas.toDataURL(type,option);

option表示0到1之间的取值，选定图片的质量，默认值是0.92

constimgZip=(file)=>{letimgZipStatus=newPromise((resolve,reject)=>{letcanvas=document.createElement("canvas");//创建Canvas对象(画布)letcontext=canvas.getContext("2d");letimg=newImage();img.src=file.content;//指定图片的DataURL(图片的base64编码数据)varOrientation='';img.onload=()=>{//canvas.width=400;//canvas.height=300;canvas.width=img.width;canvas.height=img.height;context.drawImage(img,0,0,canvas.width,canvas.height);file.content=canvas.toDataURL(file.file.type,0.5);//0.92为默认压缩质量letfiles=dataURLtoFile(file.content,file.file.name);resolve(files)}})returnimgZipStatus;};

导出方法imgZip

export{imgZip}

2.全局引入封装的方法

main.js

//引入imgUpload方法import*asimgUploadfrom"./utils/imgUpload"Vue.prototype.$imgUpload=imgUpload;

3.页面中使用

这里使用了vant ui框架，实现的头像上传，如果用原生的input file方法也是一样的使用方式

<van-uploader:after-read="afterCard":before-read="beforeRead"accept="image/*"class="arrart":max-size="10240*1024"@oversize="onOversize"ref="uploadFile"><!--<divclass="loadingWrap"v-show="personCardloading"><van-loadingclass="colouploadText"color="#fff"size="24px">{{uploadText}}</van-loading></div>--><van-imageclass="iconImg"round:src="Personal.iconUrl?$baseImgUrl+Personal.iconUrl:require('../../assets/img/touciang.png')"width="64"height="64"/></van-uploader>

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

禁用文件上传

通过disabled属性禁用文件上传。

<van-uploaderdisabled/>

限制上传大小图片

//限制上传大小图片onOversize(file){console.log(file,"file");this.$toast("文件大小不能超过10M");},

上传之前的图片验证

//上传之前的图片验证beforeRead(file){console.log(file,"file,123");if(this.$utils.isImage(file.name)){returntrue;}else{this.$toast("请上传图片格式");}},

afterCard方法，当提交了头像，先进行压缩处理，再去把formData文件流 作为参数调用接口，

获取到后台返回的图片路径，再调用更新头像接口，把获取的数据赋值显示头像的img.

//头像上传afterCard(file){this.$imgUpload.imgZip(file).then(resData=>{constformData=newFormData();formData.append("file",resData);//请求接口上传图片到服务器uploadImg(formData).then(res=>{console.log(res,"图片上传");if(res.code==200){console.log(res.data,"res.data")letparams={bbsIconUrl:res.data,userId:this.id};&nbsppileUserInfo(params).then(resImg=>{console.log(resImg,"resImg");if(resImg.code==200){this.Personal.iconUrl=res.data;this.$toast("头像修改成功");}else{this.$toast(resImg.msg);}}).catch(error=>{});}else{this.$toast(res.msg);}});});},

如果这里使用原生的input file,可按照如下操作

示例：

<inputtype="file"id="file"accept="image/*">

importaxiosfrom'axios';document.getElementById('file').addEventListener('change',(e)=>{constfile=e.target.files[0];if(!file){return;}this.$imgUpload.imgZip(file).then(resData=>{constformData=newFormData();formData.append("file",resData);//接口调用axios.post('/upload',formData).then((res)=>{console.log('Uploadsuccess');});})});

使pressorjs第三方插件实现

<ppressorjs 是一个开源的图片处理库，提供了图片压缩、图片旋转等能力

语法：

new&nbsppressor(file[,options])

1pressorjs安装

npminstall&nbsppressorjs--save

2.方法封装

Imagpressor.js

quality:quality || 0.6, //压缩质量，图片压缩比 0-1

import&nbsppressorfrom&#39pressorjs';exportdefaultfunctionImagpressor(file,backType,quality){returnnewPromise((resolve,reject)=>{new&nbsppressor(file,{quality:quality||0.6,//压缩质量success(result){if(!backType||backType=='blob'){resolve(result)}elseif(backType=='file'){resolve(file)}else{resolve(file)}//resolve(result);},error(err){console.log("图片压缩失败");reject(err);}})})}

此插件还能解决ios移动端拍照图片翻转90度问题

3.页面使用

importImagpressorfrom'@/utils/Imagpressor'

4.头像上传处理

这里记得使用 async await，注意使用的file取值，与第一种的方法有所不同

//头像上传asyncafterCard(file){letnewFile=awaitImagpressor(file.file,'file',0.6);//图片压缩constformData=newFormData();formData.append("file",newFile);uploadImg(formData).then(res=>{if(res.code==200){this.centerInfo.iconUrl=res.data;letparams={iconUrl:res.data,id:this.id,loginType:this.loginType};updateMineIconUrl(params).then(resImg=>{console.log(resImg,"resImg");if(resImg.code==200){this.$toast("头像修改成功");}else{this.$toast(res.msg);}}).catch(error=>{});}else{this.$toast(res.msg);}});},

如果这里使用原生的input file,可按照如下操作

示例：

<inputtype="file"id="file"accept="image/*">

importaxiosfrom'axios';import&nbsppressorfrom&#39pressorjs';document.getElementById('file').addEventListener('change',(e)=>{constfile=e.target.files[0];if(!file){return;}new&nbsppressor(file,{quality:0.6,success(result){constformData=newFormData();formData.append('file',result,result.name);//接口调用axios.post('/upload',formData).then(()=>{console.log('Uploadsuccess');});},error(err){console.log(err.message);},});});

“Vue.js怎么实现文件上传压缩优化”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注主机评测网网站，小编将为大家输出更多高质量的实用文章！

上一篇：go语言支持哪些函数

下一篇：Go高效率开发Web参数校验的方式有哪些

---