element上传组件上传之前的钩子问题

Question

问题描述

1、element+vue上传图片到七牛云
2、在before-upload钩子中从后端取出uptoken
3、第一次处理时，before-upload还未返回，执行了上传操作，上传错误
4、之后的上传可以使用token，上传正常

相关代码

<el-upload ref="upload" 
            action="//up.qbox.me/" 
            :show-file-list="false"
            :data="upToken" 
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"                                                     
            accept="image/jpeg,image/gif,image/png,image/jpeg"
            style="display:inline">
 <el-button size="small">上传</el-button>
</el-upload>

// 参数
return {
    // 七牛云上传token
    upToken: {}
}

// 方法
  // 上传七牛云
  // 获取token
beforeUpload (file) {     
    axios({
      method: 'get',
      url: '/get_qiniu_token',
    }).then(response => {
        this.upToken = {token: response.data.msg}
    })
},

uploadSuccess(response, file, fileList){
    console.log(file)
},

你期待的结果是什么？

是否能在第一次上传时获取到了token，再进行上传操作

Answer 1

实现方式写一个异步处理的promise

<el-upload
  class="avatar-uploader"
  action="https://upload.qbox.me"
  :data="dataObj" 
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgTextForm.topPic" :src="imgTextForm.topPic" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

---

beforeAvatarUpload(file) {
  const _self = this
  console.log(file)
  const isJPG = /(gif|jpg|jpeg|png|GIF|JPG|JPEG)$/.test(file.type)
  if (isJPG) {
    var params = {
      fileType: 0
    }
    return new Promise((resolve, reject) => {
      doGetQiniuToken(params).then(res => {
        if (res.status === 200) {
          var curr = moment(new Date()).valueOf()
          var prefix = moment(file.lastModified).format('HHmmss').toString()
          var suffix = Base64.encode(file.name)
          const key = encodeURI(`${curr}/${prefix}_${suffix}`)
          console.log(key)
          const token = res.data.uptoken
          // console.log(token)
          _self.dataObj.token = token
          _self.dataObj.key = key
        }
        resolve(true)
      }).catch(err => {
        console.log(err)
        reject(false)
      })
    })
  } else {
    Message.error('图片类型必须是.gif,jpeg,jpg,png中的一种')
    return false
  }
},

Answer 2

beforeUpload 这个钩子应该是返回一个布尔值，但是你写了一个异步函数，这个获取token的操作应该放在created里面进行。

Answer 3

思路1：
感觉你获取token的这个请求，没必要放在beforeUpload()里面,
可以初始话组件的时就去 获取token
created(){

this.getToken();

}
这样异步的问题应该就可以解决

思路2：分步上传你的文件 选取文件后不立刻上传,添加一个 上传动作按钮
拿你代码 改一下。

<el-upload ref="upload" 
            action="//up.qbox.me/" 
            :show-file-list="false"
            :data="upToken" 
            :on-success="uploadSuccess"
            ref="upload"
            :auto-upload="false"
            :before-upload="beforeUpload"                                                     
            accept="image/jpeg,image/gif,image/png,image/jpeg"
            style="display:inline">
 <el-button size="small">选取图片</el-button>
 <el-buttonsize="small" @click="submitUpload">上传</el-button>
</el-upload>

method：{
    submitUpload() {
        
    //可以再这里写你获取token的请求
    axios({
      method: 'get',
      url: '/get_qiniu_token',
    }).then(response => {
        this.upToken = {token: response.data.msg}
        //执行上传动作.
        this.$refs.upload.submit();
    })
        
    },
}