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

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

context.drawImage(img,x,y);

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

canvas.toDataURL(type, option);

const imgZip = (file) => {let imgZipStatus = new Promise((resolve, reject) => {let canvas = document.createElement("canvas"); // 创建Canvas对象(画布)let context = canvas.getContext("2d");let img = new Image();img.src = file.content; // 指定图片的DataURL(图片的base64编码数据)var Orientation = '';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为默认压缩质量let files = dataURLtoFile(file.content, file.file.name);resolve(files)}})return imgZipStatus;
};

export {imgZip
}

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

{uploadText}}

限制上传数量

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

禁用文件上传

通过 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方法，当提交了头像，先进行压缩处理，再去把formData文件流 作为参数调用接口，

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

// 头像上传afterCard(file) {this.$imgUpload.imgZip(file).then(resData => {const formData = new FormData();formData.append("file", resData);// 请求接口上传图片到服务器uploadImg(formData).then(res => {console.log(res, "图片上传");if (res.code == 200) {console.log(res.data,"res.data")let params = {bbsIconUrl: res.data,userId: this.id};compileUserInfo(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,可按照如下操作

示例：

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

 使用compressorjs第三方插件实现

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

语法：

new Compressor(file[, options]) 

1.compressorjs安装

npm install compressorjs --save

2.方法封装

ImageCompressor.js

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

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

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

2.页面使用

import ImageCompressor from '@/utils/ImageCompressor'

3.头像上传处理

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

 // 头像上传async afterCard(file) {let newFile = await ImageCompressor(file.file, 'file', 0.6); //图片压缩const formData = new FormData();formData.append("file", newFile);uploadImg(formData).then(res => {if (res.code == 200) {this.centerInfo.iconUrl = res.data;let params = {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,可按照如下操作

示例：

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

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