<el-uploadref="upload":action="aaa":on-change="importProject"name="excelFile"multiple:auto-upload="false":show-file-list="false"><el-button type="warning">導入</el-button></el-upload>
action 屬性應是一個上傳地址 URL 字符串
action如果不用的話可以隨便傳一個參數,但是不能省略
multiple:能同時上傳多個表格
auto-upload="false":表示選擇文件后不自動上傳,而是通過按鈕點擊觸發上傳。
:show-file-list="false":不展示導入的文件名稱
importProject(file) {const fd = new FormData()fd.append('file', file.raw)this.excelToJSONs(fd)//把文件傳給后端// console.log('文件', file)// console.log('fd', fd)}
getMessage() {this.$refs.upload.clearFiles()},
this.$refs.upload.clearFiles():?清空上傳組件中的文件顯示,把這句話加在想清空文件顯示的函數里
可能的錯誤:
Required request part 'file' is not present
錯誤的代碼:fd.append('file', file)
原因:看似正確地添加了 file 字段,但傳入的是整個 file 對象(其實是 el-upload 返回的一個封裝對象),而不是原生的 File 對象。
解決:改為fd.append('file', file.raw)
Current request is not a multipart request
原因:通常是因為后端期望接收一個 multipart/form-data 格式的請求(即文件上傳格式),但前端發送的是其他格式(如 JSON)
解決:用FormData()
補充:
瀏覽器無法獲取用戶電腦上文件的“真實本地路徑”(如 C:\xxx\xxx.xlsx),這是出于安全機制。
可以獲取到的是:
文件對象 (File):用于讀取內容或上傳
文件名、大小、類型等基本信息
如果需要預覽,可以生成臨時 URL(URL.createObjectURL(file))
importProject(file) {console.log('完整文件對象:', file)// 文件名console.log('文件名:', file.name)// 文件大小(字節)console.log('文件大小:', file.size)// 文件類型console.log('文件類型:', file.type)// 保存原始 File 對象,供后續處理用this.selectedExcelFile = file.raw
}