上傳檔案

手動上傳

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