像我们写vue项目的时候上传图片经常会遇到上传图片需要压缩传给后台，以免图片过大导致服务器内存崩溃。现在有一个很好的基于vue的图片压缩插件，话不多说，上代码
首先先安装
npm install image-compressor.js
然后再到需要用到的vue组件中引入
import ImageCompressor from 'image-compressor.js'
组件中的代码示例
<input type="file" multiple="multiple" id="file3" v-on:change="load($event)" ref="file1" />
load(e){
var token = localStorage.getItem('token')
var that = this;
const file = e.target.files[0]; // file对象
if (!file) { return } // 为空处理
new ImageCompressor(file, {
quality: .6,//图片压缩的质量，可改
success(result) {
console.log(result)
const formData = new FormData();
formData.append('userImg', result, result.name);//压缩后的文件会自动转换成二进制文件流类型
var obj = {
data: formData,
isQs: true
}
通过XMLHttpRequest服务发送压缩的图像文件-Send the compressed image file to server with XMLHttpRequest.
that.$axios.post(that.$api.getUser, obj,{
headers:{
'token':token
}
}).then(res=>{
});
},
error(e) {
console.log(e.message);
},
});
},
