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

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

两种方法 &＃xff1a;

• 第1种是借助canvas的封装的文件压缩上传
• 第2种&＃xff08;扩展方法&＃xff09;使用compressorjs第三方插件实现

目录

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

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

1.新建imgUpload.js

2.全局引入封装的方法

3.页面中使用

 使用compressorjs第三方插件实现

1.compressorjs安装

2.方法封装

2.页面使用

3.头像上传处理

下面来详细介绍两种方法&＃xff1a;

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

封装之前&＃xff0c;先要对canvas相关的方法有所了解 

简单实例如下:

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

使用 style 属性来添加边框:

style&＃61;"border:1px solid #000000;">


1.新建imgUpload.js

 将base64转换为file文件

const dataURLtoFile &＃61; (dataurl, filename) &＃61;> { let arr &＃61; dataurl.split(&＃39;,&＃39;)let mime &＃61; arr[0].match(/:(.*?);/)[1]let bstr &＃61; atob(arr[1])let n &＃61; bstr.lengthlet u8arr &＃61; new Uint8Array(n)while (n--) {u8arr[n] &＃61; bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })
};

使用canvas的方法实现&＃xff08;拓展&＃xff09;

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

在画布上定位图像&＃xff1a;

context.drawImage(img,x,y);

在画布上定位图像&＃xff0c;并规定图像的宽度和高度&＃xff1a;剪切图像&＃xff0c;并在画布上定位被剪切的部分&＃xff1a;

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

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

canvas.toDataURL(type, option);

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

const imgZip &＃61; (file) &＃61;> {let imgZipStatus &＃61; new Promise((resolve, reject) &＃61;> {let canvas &＃61; document.createElement("canvas"); // 创建Canvas对象(画布)let context &＃61; canvas.getContext("2d");let img &＃61; new Image();img.src &＃61; file.content; // 指定图片的DataURL(图片的base64编码数据)var Orientation &＃61; &＃39;&＃39;;img.onload &＃61; () &＃61;> {// canvas.width &＃61; 400;// canvas.height &＃61; 300;canvas.width &＃61; img.width;canvas.height &＃61; img.height;context.drawImage(img, 0, 0, canvas.width, canvas.height); file.content &＃61; canvas.toDataURL(file.file.type, 0.5); // 0.92为默认压缩质量let files &＃61; dataURLtoFile(file.content, file.file.name);resolve(files)}})return imgZipStatus;
};

导出方法imgZip

export {imgZip
}

2.全局引入封装的方法

main.js

// 引入imgUpload方法
import * as imgUpload from "./utils/imgUpload"
Vue.prototype.$imgUpload &＃61; imgUpload;

3.页面中使用

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

限制上传数量

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

禁用文件上传

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

 限制上传大小图片

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

上传之前的图片验证 

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

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

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

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

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

示例&＃xff1a;

import axios from &＃39;axios&＃39;;document.getElementById(&＃39;file&＃39;).addEventListener(&＃39;change&＃39;, (e) &＃61;> {const file &＃61; e.target.files[0];if (!file) {return;}this.$imgUpload.imgZip(file).then(resData &＃61;> {const formData &＃61; new FormData();formData.append("file", resData);//接口调用axios.post(&＃39;/upload&＃39;, formData).then((res) &＃61;> {console.log(&＃39;Upload success&＃39;);});})});

 使用compressorjs第三方插件实现

compressorjs 是一个开源的图片处理库&＃xff0c;提供了图片压缩、图片旋转等能力

语法&＃xff1a;

new Compressor(file[, options]) 

1.compressorjs安装


npm install compressorjs --save

2.方法封装

ImageCompressor.js

quality:quality || 0.6, //压缩质量&＃xff0c;图片压缩比 0-1

import Compressor from &＃39;compressorjs&＃39;;
export default function ImageCompressor(file, backType, quality) {return new Promise((resolve, reject) &＃61;> {new Compressor(file, {quality:quality || 0.6, //压缩质量success(result) {if (!backType || backType &＃61;&＃61; &＃39;blob&＃39;) {resolve(result)} else if (backType &＃61;&＃61; &＃39;file&＃39;) {resolve(file)} else {resolve(file)}// resolve(result);},error(err) {console.log("图片压缩失败");reject(err);}})})
}

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

2.页面使用

import ImageCompressor from &＃39;&＃64;/utils/ImageCompressor&＃39;

3.头像上传处理

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

// 头像上传async afterCard(file) {let newFile &＃61; await ImageCompressor(file.file, &＃39;file&＃39;, 0.6); //图片压缩const formData &＃61; new FormData();formData.append("file", newFile);uploadImg(formData).then(res &＃61;> {if (res.code &＃61;&＃61; 200) {this.centerInfo.iconUrl &＃61; res.data;let params &＃61; {iconUrl: res.data,id: this.id,loginType: this.loginType};updateMineIconUrl(params).then(resImg &＃61;> {console.log(resImg, "resImg");if (resImg.code &＃61;&＃61; 200) {this.$toast("头像修改成功");} else {this.$toast(res.msg);}}).catch(error &＃61;> {});} else {this.$toast(res.msg);}});},

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

示例&＃xff1a;

import axios from &＃39;axios&＃39;;
import Compressor from &＃39;compressorjs&＃39;;document.getElementById(&＃39;file&＃39;).addEventListener(&＃39;change&＃39;, (e) &＃61;> {const file &＃61; e.target.files[0];if (!file) {return;}new Compressor(file, {quality: 0.6,success(result) {const formData &＃61; new FormData();formData.append(&＃39;file&＃39;, result, result.name);//接口调用axios.post(&＃39;/upload&＃39;, formData).then(() &＃61;> {console.log(&＃39;Upload success&＃39;);});},error(err) {console.log(err.message);},});});

⭐️⭐️⭐️  作者&＃xff1a;船长在船上
&＃x1f6a9;&＃x1f6a9;&＃x1f6a9;  主页&＃xff1a;来访地址船长在船上的博客
&＃x1f528;&＃x1f528;&＃x1f528;  简介&＃xff1a;CSDN前端领域博客专家&＃xff0c;CSDN前端领域优质创作者&＃xff0c;资深前端开发工程师&＃xff0c;专注web前端领域开发&＃xff0c;在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。