背景介绍

oss目前并没有官方的SDK可以批量上传文件，官方推荐的几种批量上传文件方式

自行改造前端方案及问题

这里放在前端处理多文件上传，采用思路二。

实现过程中发现存在问题是，当遍历文件，for循环体内发起文件上传请求时，文件大小不一样，导致完成的时间有差异批量数据上传业务意思，由于是ajax请求是异步，导致接口回调传回的图片顺序和上传时想要的顺序不一致。

配合es6async/await批量数据上传业务意思，使请求变成同步。

代码

采用vue+element

template>
  div class="upload-container">
    el-upload
      ref="upload"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :limit="150"
      :on-exceed="handleExceed"
      :action="URL+'/commonUtil/uploadFile'"
      :auto-upload="false"
      :on-change="uploadChange"
      :http-request="fnUploadRequest"
      :file-list="fileList"
      list-type="picture-card"
      class="upload-demo"
      multiple>
      el-button slot="trigger" size="small" type="text">选取文件el-button>
      el-button style="margin-left: 10px;" size="small" type="success" class="uploadOssBtn" @click="handleSubmitUpload">上传到服务器el-button>
    el-upload>
    共{{ allNum }}个文件，上传完成第{{ uploadNum }}个文件
  div>
template>
script>
import { upload } from '@/api/article'
export default {
  name: 'EditorImgListUpload',
  props: {
    closeDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisibless: false,
      fileList: [],
      uploadNum: 0,
      allNum: 0,
      uploadFileList: [],
      loading: false,
      responeList: [],
      limit: 150
    }
  },
  watch: {
    closeDialog: function(newVal, oldVal) {
      if (newVal) {
        this.uploadFileList = []
        this.fileList = []
        this.responeList = []
        this.uploadNum = 0
        this.allNum = 0
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log('删除')
      console.log(file, fileList)
      this.fileList = fileList
      this.allNum = fileList.length
    },
    handleExceed(files, fileList) {
      // const limit = this.limit
      this.$message.warning(`当前限制选择 150 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    uploadChange(file, fileList) {
      this.fileList = fileList
      this.allNum = fileList.length
    },
    async handleSubmitUpload(e) {
      await this.$refs.upload.submit()
      this.uploadoss()
    },
    async uploadoss() {
      this.loading = true
      var length = this.uploadFileList.length
      for (let i = 0; i const formData = new FormData()
        formData.append('file', this.uploadFileList[i].file)
        formData.append('filedir', 'test')
        await upload(formData).then(response => {
          if (response.data.code === 200) {
            this.uploadNum++
            this.responeList.push({ url: response.data.data })
            if (this.uploadNum === this.allNum) {
              this.loading = false
              this.$notify({
                title: '上传完成',
                message: '提示消息',
                type: 'success'
              })
              this.$emit('successUpload', this.responeList)
            }
          } else {
            this.$notify({
              title: '上传失败，请重新上传',
              message: '提示消息',
              type: 'warning'
            })
            this.loading = false
          }
        })
      }
    },
    fnUploadRequest(res) {
      console.log('file', res)
      this.uploadFileList.push(res)
    }
    // handleSubmit(res) {
    

来源【首席数据官】，更多内容/合作请关注「辉声辉语」公众号，送10G营销资料！