vue 配合 iview upload / el-upload 上传七牛

vue项目配置iview的upload插件上传文件到七牛服务器

1、ivew upload组件

<Upload
      type="drag"   // 支持拖拽
      multiple      // 支持多文件上传 
      :max-size="10240000"  // 设置上传最大量
      :action="'https://upload.qiniup.com'" // 七牛服务器地址，详见下面图片
      :show-upload-list="false" // 是否显示上传列表
      :data="uploadParams"      // 上传参数配置
      :default-file-list="[]"   // 显示默认列表，之前上传的文件列表
      :on-success="handleSuccess"   // 上传成功回调函数
      :before-upload="beforeUpload" // 上传之前回调函数，可以在这里设置上传的参数
      :on-remove="removeFile"       // 删除文件回调函数
      :on-preview="previewFile"     // 点击上传列表回调函数
      :on-progress="progressFile"   // 上传进度回调函数
      :on-change="changeFile"       // 选择文件改变回调函数
      style="width: 100%;"
      >
      <i class="iconfont icon-add1 icon"></i>{{buttonText ? buttonText : '点击或者拖拽到此上传'}}
    </Upload>

其实上传七牛有两种方法，这里直接使用表单action提交自动触发上传七牛，也可以导入七牛js通过七牛实例传参、掉接口上传。

2、获取token，上传必备，通过后台接口返回。
3、设置其他参数，通过表单里面的:data属性传递给七牛

data () {
    return {
        uploadParams: {}
    }
}
methods: {
    beforeUpload (request) {
      console.log(request, 'beforeUpload')
      // **注意这里的参数必须通过属性赋值，如果直接修改整个uploadParams是无效的。**
      // 上传之前设置上传参数,
      this.uploadParams.token = this.$store.state.upload_token
      // 七牛response hash key的值自定义，后面如果需要浏览或者下载都需要这个地址，如果key不定义，那么七牛生成的key === hash的值
      this.uploadParams.key = request.name
      // 整个上传肯定是一个组件，所以需要将值反馈给父界面
      this.$emit('completeFun', [request])
    },
    handleSuccess (request, file, list) {
      console.log(file, list, '上传成功')
      // 这里就能拿到七牛返回的response信息（hash, key)然后拼接服务器地址，就可以访问了
      this.imageUrl = this.$store.getters.upload_url + request.key
      console.log(request, this.$store.getters.upload_url + file.name, '获取图片地址')
      this.$emit('successFun', [file, list, this.imageUrl])
    },

}

遇到的问题

Q、没有设置key参数，七牛返回的hash 和 key 相同，如果想要下载或者访问图片，只能通过生成的key来访问，没有文件名称，无法访问。

W、在beforeupload钩子函数中设置key参数为文件名称

Q、上传多个文件七牛以后需要调接口先保存到服务器，然后在从服务器获取显示列表，都是在success钩子函数中进行的，这样会出现，上传文件丢失等问题

W、因为接口异步获取、上传多个文件会执行多次success等原因造成的。原来想的是可以在beforeupload钩子函数中调取修改接口上传图片，然后在success中调取查询接口，但是这里不能获取到hash、key的值，后台需要这些参数，最后是在success中做了计数，如果上传五个文件，初始化index = 0，success钩子函数中index++，如果index === fileList.length这时候调取后台编辑接口，然后同步调取查询接口。