Vue.js实现文件上传压缩优化处理技巧
更新时间：2022年11月26日 15:46:33 作者：船长在船上
这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传，二是使用compressorjs第三方插件实现，本文给大家介绍的非常详细需要的朋友可以参考下
vue js实现文件上传压缩优化处理
两种方法 ：
- 第1种是借助canvas的封装的文件压缩上传
- 第2种（扩展方法）使用compressorjs第三方插件实现
下面来详细介绍两种方法：
借助canvas的封装的文件压缩上传
封装之前，先要对canvas相关的方法有所了解
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (或者其他), width 和 height 属性定义的画布的大小.
使用 style 属性来添加边框:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
1.新建imgUpload.js
将base64转换为file文件
const dataURLtoFile = (dataurl, filename) => {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([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
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;
};导出方法imgZip
export {
imgZip
}2.全局引入封装的方法
main.js
// 引入imgUpload方法 import * as imgUpload from "./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">
<!-- <div class="loadingWrap" v-show="personCardloading">
<van-loading class="colorCom uploadText" color="#fff" size="24px">{{uploadText}}</van-loading>
</div> -->
<van-image class="iconImg" round :src="Personal.iconUrl?$baseImgUrl+Personal.iconUrl:require('../../assets/img/touciang.png')" width="64" height="64" />
</van-uploader>限制上传数量
通过 max-count 属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。
禁用文件上传
通过 disabled 属性禁用文件上传。
<van-uploader 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,可按照如下操作
示例：
<input type="file" id="file" accept="image/*">
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度问题
3.页面使用
import ImageCompressor from '@/utils/ImageCompressor'
4.头像上传处理
这里记得使用 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,可按照如下操作
示例：
<input type="file" id="file" accept="image/*">
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);
},
});
});到此这篇关于Vue.js实现文件上传压缩优化处理的文章就介绍到这了,更多相关vue文件上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue3.0翻牌数字组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
下面小编就为大家分享一篇ajax请求+vue.js渲染+页面加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vuejs第七篇之Vuejs过渡动画案例全面解析的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了vue中自定义组件双向绑定的三种方法总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue-router 是 Vue.js 官方的路由库.这篇文章主要介绍了vue-router项目实战总结,需要的朋友可以参考下2018-02-02
本文主要介绍了vue-electron中修改表格内容并修改样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要为大家详细介绍了vue实现拖动调整左右两侧容器大小，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue.js之组件系统,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-05-05
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了elementUI table如何给表头添加气泡显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论