lrz图片压缩
npm install lrz
// main.js引入
import lrz from 'lrz'
<input type="file" @change="upfileimg($event)">
//上传图片
methods:{
upfileimg(e) {
this.$toast.loading({ duration: 0, forbidClick: true, mask: false, message: '图片上传中', });
let file = e.target.files[0];
// 图片开始压缩,获得压缩后的rst参数
lrz(file, { quality: 0.3 }).then(rst => {
this.$toast.clear();
let userfile = this.upfile(rst.base64, rst.origin.name);//调用自己的upfile方法吧压缩后的base64转二进制
let formdata = new FormData();
formdata.append('img', userfile);
this.axios.post('api/ucenter/edit_pic', formdata).then(res => {
if (res.status == 1) {
this.userimg = res.data.img;
this.$toast('头像上传成功')
e.target.value = '';//重置一遍value,至关重要,防止第二次上传相同图片,或者取消上传报错
}
})
});
},
/*将base64转换为file*/
dataURLtoFile(dataurl, filename) { //将base64转换为文件
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}
}
图片上传成功重置一遍value至关重要,防止第二次上传相同图片,或者取消上传报错