用element的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>

// 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);  }) }}

//upload.vueupqiniu(param) { let filetype = '' if (param.file.type === 'image/png') {  filetype = 'png' } else {  filetype = 'jpg' } const formdata = {  filetype: filetype,  param: param } this.actionGetUploadToken(formdata)    }// vuex/action.jsactionGetUploadToken({commit}, obj) { const msg = {  filetype: obj.filetype } usersApi.getImgUploadToken(msg).then((response) => {  if(response.stateCode === 200) {   commit('uploadImg', {'token': response.token, 'key': response.key, 'param': obj.param})  }  }, (error) => {  console.log(`获取图片上传凭证错误：${error}`)  commit('uploadImgError') })},

filetype = data.get('filetype')# 构建鉴权对象q = Auth(configs.get('qiniu').get('AK'), configs.get('qiniu').get('SK'))# 生成图片名salt = ''.join(random.sample(string.ascii_letters + string.digits, 8))key = salt + '_' + str(int(time.time())) + '.' + filetype# 生成上传 Token，可以指定过期时间等token = q.upload_token(configs.get('qiniu').get('bucket_name'), key, 3600)return Response({"stateCode": 200, "token": token, "key": key}, 200)

// vuex/state.jsimgName: [], //图片名数组// vuex/mutations.jsuploadImg(state, msg) { const config = {  useCdnDomain: true,  region: qiniu.region.z2 } var putExtra = {  fname: msg.param.file.name,  params: {},  mimeType: ["image/png", "image/jpeg", "image/gif"] }; var observer = {  next(res){  },  error(err){   console.log(`图片上传错误信息：${err.message}`)  },   complete(res){   console.log(`图片上传成功：${res.key}`)   state.imgName.push(res.key)  } } var observable = qiniu.upload(msg.param.file, msg.key, msg.token, putExtra, config) //上传开始 var subscription = observable.subscribe(observer)},

// 用到upload.vue的界面this.imgsList = this.imgName.map(key => `http://${this.qiniuaddr}/${key}`)switch(this.imgsList.length) { case 4: this.img4 = this.imgsList[3] case 3: this.img3 = this.imgsList[2] case 2: this.img2 = this.imgsList[1] case 1: this.img1 = this.imgsList[0]}let obj = { goods_img1: this.img1, goods_img2:this.img2, goods_img3:this.img3, goods_img4:this.img4}//将信息发送给后端this.actionPublish(obj)