前端 vue element 组件 el-upload 上传文件

上传文件

手动上传

          <el-upload
            class="add-upload"
            ref="add-upload"
            drag
            action
            multiple
            :auto-upload="false"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="handleChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              上传文件只能为excel文件，且为xlsx、xls格式
            </div>
          </el-upload>

    // 文件上传数量判断
    handleExceed(e) {
      this.$message({
        type: 'warning',
        message: '只能上传一个文件!'
      })
    },
    // 文件格式判断
    handleChange(file, fileList) {
      if (!/.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
        this.$message({
          type: 'warning',
          message: '上传文件只能为excel文件!'
        })
        this.fileList = []
        return false
      }
      this.file = file.raw // 手动上传需要保存 file.raw
    },
	// 根据触发条件触发对应请求函数 将 this.file 传入就行

自动上传

     <el-upload
            ref="upload"
            action
            drag
            :auto-upload="true"
            :http-request="fileUpload"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="fileList"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>更新文件
            </div>
            <div class="el-upload__tip" slot="tip">
              上传文件只能为pdf文件
            </div>
          </el-upload>

    fileUpload(file) {
	 // file 是 element 处理过的 raw 数据，不需要单独保存了
        updateFile(this.row.id, file).then(res => {
          this.$message({
            type: 'success',
            message: '上传文件成功!'
          })
          this.fileList = []
        })
      }
    },

请求设置

function updateFile(id, file) {
  let param = new FormData()
  // param.append('file', file) // 手动上传
  param.append('file', file.file) // 自动上传
  return request({
    url: `/request/upload-file?id=${id}`,
    method: 'post',
    headers: { 'Content-Type': 'multipart/form-data' },
    data: param
  })
}