【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
  })
}