用vue实现多图片上传

前端我用element-ui的Upload组件作为基础，vuex做状态管理。后端用的是Django和django-rest-framework。七牛云作为图床。

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

效果展示

项目执行流程

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

• 前端向后端请求用来上传图片至服务器的token

• 后端为每张要上传的图片生成一个图片名，并用这个图片名生成token

• 后端将图片名和token返回给前端

• 前端拿到token以后，将图片上传至服务器

• 上传成功以后，前端将图片名发给后端

• 后端将图片名存入数据库

项目实现过程

上面的执行流程对应的代码实现是这样：

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

<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>
复制代码

:http-request="upqiniu" 指的是当用户点击上传按钮以后，执行upqiniu 这个上传方法。关于该组件的用法可以在element的官方文档查阅：Upload 上传

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

//获取token
getToken(filetype) {
  let formdata = new FormData()
  //filetype是指图片类型，分为'png'和'jpg'
  formdata.append('filetype', filetype)
  //生成随机字符串和生成的token进行绑定，以便知道每个upqiniu()上传的是哪张图片
  const timestamp = Math.random().toString(36).substring(2)
  formdata.append('timestamp', timestamp)
  this.actionGetUploadToken(formdata)
  return timestamp
}
复制代码

假设用户要上传4张图片，那么，当用户点击上传按钮以后，这4张图片是同时执行上传方法的，也就是同时向后端请求token。因为我把整个项目的http请求都放在了vuex/action中，所以当前端向后端请求到token以后，是将token塞进vuex/state的token列表里。这样的话，每张图片的上传方法就不知道自己要从token列表里取哪个token用来上传图片。所以每张图片的上传方法在向后端请求token前，会生成一个随机字符串，上传方法就凭借这个字符串去token列表里领取自己的token。

3.后端生成上传token，并发给前端

filetype = data.get('filetype')
timestamp = data.get('timestamp')
# 构建鉴权对象
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, "timestamp": timestamp}, 200)
复制代码

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

//设置上传图片的信息
setImgInfo(state, msg) {
state.publishToken[msg.timestamp] = msg.token
state.imgName[msg.timestamp] = msg.key
}

//开始上传
var observable = qiniu.upload(param.file, this.imgName[timestamp], this.publishToken[timestamp], putExtra, config)
var subscription = observable.subscribe(observer) // 上传开始
复制代码

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

for(let key in this.imgName) {
  this.imgsList.push(`http://${this.qiniuaddr}/${this.imgName[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)
复制代码

转载于:https://juejin.im/post/5c4d3fb7f265da61542df927