Vue+Element-UI实现上传图片并压缩

Vue+Element-UI上传图片并压缩，供大家参考，具体内容如下1.版本Vue:2.5.2Element-UI：2.12.0可实现

Vue+Element-UI 上传图片并压缩，供大家参考，具体内容如下

1.版本

Vue:2.5.2 Element-UI：2.12.0

可实现图片上传前，自动压缩。 Element-UI组件，详情见 官网。

2.template部分

<el-form-item label="照片">
 <el-upload
 accept="image/*"
 class="avatar-uploader"
 :action="uploadPath"
 :show-file-list="false"
 :on-success="handleAvatarSuccess"
 :before-upload="beforeAvatarUpload">
 <img v-if="imgUrl" :src="imgUrl" class="avatar">
 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
</el-form-item>

3.script部分

data() {
 return {
 //压缩质量
 imgQuality: 0.5,
 imageUrl: ''
}
methods: {
 handleAvatarSuccess(res, file) {
 // 服务器返回结果处理
 },
 dataURItoBlob(dataURI, type) {
 var binary = atob(dataURI.split(',')[1]);
 var array = [];
 for(var i = 0; i < binary.length; i++) {
 array.push(binary.charCodeAt(i));
 }
 return new Blob([new Uint8Array(array)], {type: type});
 },
 beforeAvatarUpload(file) {
 const _this = this
 return new Promise(resolve => {
 const reader = new FileReader()
 const image = new Image()
 image.onload = (imageEvent) => {
 const canvas = document.createElement('canvas');
 const context = canvas.getContext('2d');
 const width = image.width * _this.imgQuality
 const height = image.height * _this.imgQuality
 canvas.width = width;
 canvas.height = height;
 context.clearRect(0, 0, width, height);
 context.drawImage(image, 0, 0, width, height);
 const dataUrl = canvas.toDataURL(file.type);
 const blobData = _this.dataURItoBlob(dataUrl, file.type);
 resolve(blobData)
 }
 reader.onload = (e => { image.src = e.target.result; });
 reader.readAsDataURL(file);
 })
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。