用element的upload组件实现多图片上传和压缩的示例代码

我用vuex做状态管理，七牛云做图床。

项目地址：多图片上传组件

效果展示

项目执行流程

首先，让我们来分析一下实现多图片上传的流程：

项目实现过程

1.我们要利用element-ui的Upload组件布置界面：

//upload.vue<el-upload :action= domain ref="upload" accept='image/jpeg,image/gif,image/png' :auto-upload="false" :http-request="upqiniu" :limit="limit" :multiple="multiple" list-type="picture-card" :before-upload="beforeUpload" :on-preview="handlePictureCardPreview" :on-change="handldChange" :on-remove="handleRemove"> <i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""></el-dialog>

domain 指的是我们的上传地址，upqiniu 是我们自定义的上传方法，beforeUpload 是图片上传前执行的方法。关于该组件的其他用法可以在element的官方文档查阅：Upload 上传

2.对图片进行压缩

// upload.vueimgQuality: 0.5, //压缩图片的质量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});},beforeUpload(param) { //对图片进行压缩 const imgSize = param.size / 1024 / 1024 if(imgSize > 1) {  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(param.type);    const blobData = _this.dataURItoBlob(dataUrl, param.type);    resolve(blobData)   }   reader.onload = (e => { image.src = e.target.result; });   reader.readAsDataURL(param);  }) }}

压缩图片实现起来比较简单。就是在beforeUpload()方法里面return一个Promise，Promise里面我们把图片的长度和宽度按比例进行缩小，并把图片画到canvas上，然后把canvas转成一个blod对象。