从零开始学习Vue - ElementUI自定义文件上传请求

1. 参考文档

• element-ui上传组件，通过自定义请求上传文件

2. 自定义上传步骤

• 自定义上传思路很简单, 我们自己封装文件对象以及需要携带的参数

2.1 封装api

• 我们自己封装请求的api, 不使用 elementui 自带的 action

  import api from '@/utils/api'
  
  export function excelUpload(formData) {
    return api({
      url: 'excel/upload',
      method: 'post',
      data: formData
    })
  }
  
  

2.2 自定义表单数据

• 上传组件

  <el-upload
              ref="excelUploadRef"
              class="excel-upload-style"
              :accept="acceptFileType"
              :data="uploadData"
              :on-change="handleChange"
              drag
              :before-upload="beforeUpload"
              :before-remove="beforeRemove"
              :http-request="handleHttpRequest"
              action="Fake Action"
              :auto-upload="false">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
  

• 首先关闭自动上传 :auto-upload="false"

• 指定组件的引用对象 ref="excelUploadRef" 用于提交

• 获取文件对象 :on-change="handleChange" 监听文件的变化以获取文件列表

• 这个有两种, 一种是多个文件上传, 一种是单文件上传

• 单文件上传的写法 :

  handleChange(file, fileList) {
        this.file = file
  },
  

• 多文件上传的写法 :

  handleChange(file, fileList) {
        this.fileList = fileList
  },
  

• 如果有需要还可以自定义一些携带的参数 : tableName , currentDate

    data() {
      return {
        fileList: null,
        file: null,
        // 可以上传的文件类型
        acceptFileType: ".xlsx,.xls, .jpg",
        tableName: '',
        // 当前数据所属日期
        currentDate: null,
        tableOptions: tableOptions
      }
    },
  

• 然后是需要封装自己的表单数据,

• handleHttpRequest 这个是绑定在 :http-request="handleHttpRequest"

• 单文件: excelUpload(formData) 是我上面自己封装的api

      handleHttpRequest() {
        let formData = new FormData()
        formData.append("file", this.file.raw)
        formData.append("tableName", this.tableName)
        formData.append("currentDate", this.currentDate)
        excelUpload(formData).then(info => {
          this.$message.success("excel 文件上传成功!")
        }).catch(err => {
          this.$message.error("excel 文件上传失败!")
        })
      },
  

• 特别注意 : this.file.raw 要获取的是这个, 而不是 this.file

• 多文件

  handleHttpRequest() {
  	let formData = new FormData()
        this.fileList.forEach(item => {
          formData.append("files", item.raw);
        });
        formData.append("tableName", this.tableName)
        formData.append("currentDate", this.currentDate)
        
      excelUpload(formData).then(info => {
          this.$message.success("excel 文件上传成功!")
        }).catch(err => {
          this.$message.error("excel 文件上传失败!")
        })
  }
  

• 然后自定义提交即可

      submitUpload() {
        this.$refs.excelUploadRef.submit()
      },