業務實際需求：
- 點擊【選擇】按鈕先選擇文件，展示文件的詳情：類型，大小，日期......
- 點擊【上傳】按鈕這個時候才去上傳文件
如圖：
BUG復現：
點擊上傳文件后發現xlsx文件有些數據沒填寫，然后打開測試文件把漏掉的或者個別字段重新修改填上去，繼續點擊上傳按鈕，發現這個時候就報錯了。如圖：
問題原因：主要是瀏覽器的安全機制，如果要上傳的文件先選擇然后進行了修改再上傳則會被拒絕上傳
解決問題
1、每次上傳，把文件轉成base64，從而與本地的文件狀態失去關聯，無論后續怎么修改文件再點擊上傳，永遠上傳的還是最開始上傳的那份。（不推薦，用戶既然要改文件數據，肯定是希望上傳最新的文件，而不是沒改之前的）
2、給到用戶反饋結果提示，告知用戶文件已經被修改請重新上傳（推薦）
- js監聽不到文件的改變的函數，只能通過接口請求失敗后通過??
promise?的?catch?捕獲錯誤然后提示到用戶
代碼實現
1、請求中實現
async submit() {const file = '測試測試測試文件.xlsx'; // 上傳后拿到的file文件const form = new FormData()form.append('id', Math.random())form.append('file', file)form.append('fileType','TEST')const res = await uploadApi(form)if (!res) return this.$message.warning('文件已修改，請刪除后再重新上傳！')if (res.code === 200) {//done}},2、獲取文件中攔截
//上傳并解析文件
function encodeFile(file) { return new Promise((resolve, reject) => { const reader = new FileReader()reader.readAsDataURL(file) //讀取到文件返回一個promise，如果讀取成功了說明文件沒有進行更改reader.onload = function(e) { const base64Data = e.target.result.split(',')[1] // 提取Base64編碼部分 resolve(base64Data) // 使用Promise的resolve方法返回Base64數據 }//如果被拒絕了則說明文件進行了更改，告知用戶需要重新選擇文件reader.onerror = function(e) { this.$message.warning('文件已修改，請刪除后再重新上傳！')reject(new Error(e)) }})
} 發現問題，記錄一下~
