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

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

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

效果展示

项目执行流程

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

• 前端向后端请求用来上传图片至服务器的token
• 后端为每张要上传的图片生成一个图片名，并用这个图片名生成token
• 后端将图片名和token返回给前端
• 前端拿到token以后，将图片上传至服务器
• 上传成功以后，前端将图片名发给后端
• 后端将图片名存入数据库
  

项目实现过程

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.vue
imgquality: 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对象。

3.前端向后端请求上传token。

//upload.vue
upqiniu(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.js
actiongetuploadtoken({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')
 })
},

4.后端生成上传token，并发给前端，我用python实现。

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)

5.前端接收token，开始向服务器上传图片

// vuex/state.js
imgname: [], //图片名数组

// vuex/mutations.js
uploadimg(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)
},

6.上传成功以后，将图片名存入数据库

// 用到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)

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