【注】由于很久没碰过前端了，以后也不怎么想在这方向研究，当初很多实现细节基本已经忘光了。此篇文章仅供大家参考！

之前的项目，学长给我的最后一个任务就是文件上传，然而那时候一头雾水。最后因为进度原因，没有让我完成文件上传那个模块。

这个项目又再一次面对文件上传的功能实现，今天第一次成功实现文件上传的功能，记录一下

iview upload 组件使用：

  <div class="demo-upload-list" v-for="(item, index) in uploadList" v-bind:key="index">
    ![](item.url)
    <div class="demo-upload-list-cover">
    <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
    </div>
  </div>
  <Upload
     ref="upload"
     :show-upload-list="false"
     :on-success="handleSuccess"
     :format="['jpg','jpeg','png']"
     :max-size="2048"
     :on-format-error="handleFormatError"
     :on-exceeded-size="handleMaxSize"
     :before-upload="handleBeforeUpload"
     multiple
     type="drag"
     action="/UploadPicture/UploadFiles"
     style="display: inline-block;width:58px;">
     <div style="width: 58px;height:58px;line-height: 58px;">
     <Icon type="camera" size="20"></Icon>
     </div>
   </Upload>
   <Modal title="查看图片" v-model="visible">
     ![](visible)
   </Modal>

<script>
export default {
data() {
  return {
    uploadList: [],
    visible: false
  }
},
method: {
  handleView (file) {
      this.imgName = name
      this.visible = file.url
    },
    async handleRemove (file) {
      // 从 upload 实例删除数据
      try {
        const fileList = this.$refs.upload.fileList
        this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
        console.log(file)
        var delObj = {
          fileId: file.fileId
        }
        console.log(delObj)
        await this.$ajax.test.deletePicture(delObj)
        console.log('23333333333')
      } catch (err) {
        this.$Message.error(err.message)
        console.log(err.message)
      }
    },
    async download() {
      try {
        this.fileLoading = true
        var data = await this.$ajax.contest.getInvoicePicture()
        console.log(data)
        for (const item of data.items) {
          this.uploadList.push({
            fileId: item.fileId,
            name: item.fileName,
            url: `/UploadPicture/GetFile?Id=${item.fileId}&FileName=${item.fileName}`
          })
        }
        console.log(this.uploadList)
        this.fileLoading = false
      } catch (err) {
        this.$Message.error(err.message)
      }
    },
    async handleSuccess (response, file, fileList) {
      // 因为上传过程为实例，这里模拟添加 url
      // file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar'
      // file.name = '7eb99afb9d5f317c912f08b5212fd69a'
      try {
        console.log('上传完成，开始授权。。')
        if (!response.success) {
          throw response.error
        }
        console.log(response.result)
        const res = response.result
        console.log('hhhhhhhhh')
        for (const item of res) {
          await this.$ajax.test.uploadpicutures({
            fileId: item.id
          })
        }
        console.log('授权完成！')
      } catch (err) {
        this.$Message.error('文件上传失败，可能无法正常访问！')
        console.log(err)
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    handleBeforeUpload () {
      const check = this.uploadList.length < 20
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 5 张图片。'
        })
      }
      return check
    }
}
   
}
</script>

整体的思路在 <upload>里的action写好文件上传地址，然后就会自动上传到服务器，返回得到的是fileId（可以log一下参数里response看一下）。然后需要在handleSuccess函数里把fileId在存储图片的表里绑定文件Id。

上传流程基本就是这样