elementUI upload里使用七牛云直传

elementUI upload组件里使用七牛云直传：

<el-upload
      :file-list="fileList"
      action="https://upload-z2.qiniup.com"
      :headers="{ Authorization: `Bearer ${token}` }"
      :show-file-list="false"
      :on-success="(res, file) => onSuccess(res, file)"
      :before-upload="(e) => beforeUpload(e)"
      :data="postData"
    >
      <el-button
        :loading="loading"
        size="small"
        type="primary"
        plain
        icon="el-icon-upload"
        >点击上传</el-button>
</el-upload>

比普通上传多一个参数 data，因为七牛云上传每次要两个参数，postData里就两个值token和key 

1. 获取token( 这里后端给的 )

   async getFileToken() {
         let res = await this.$API.upload.getFileToken()
         this.postData.token = res.data
   },

2. 在beforeUpload函数中拼接一个随机字符串（防止上传名称过长或者过短，以及重复名称的问题）

   beforeUpload(file) {
         let index = file.name.lastIndexOf('.')
         let end = file.name.slice(index)
         // 组合12位随机字符串
         this.postData.key = `${randomString()}${end}
   }

3. 在onSuccess函数中使用七牛云外链地址+上传名称 来合成链接

   onSuccess(res, file) {
         let url = `http://你的专属七牛云外链地址/${ res.key }`
   }

本来想用户上传什么就用什么名字，但是过长过短和重复等问题都会导致上传失败，所以才在上传前更改key，希望大佬有更好的方法能在评论交流一下