el-upload拍照上傳多個檔案報錯 ERR_UPLOAD_FILE_CHANGED問題

nd發表於2024-06-13

最近同事使用el-upload上傳圖片時出現一個問題，連續拍照多個圖片的時候，迴圈呼叫介面上傳會報錯： ERR_UPLOAD_FILE_CHANGED，網上找了很多方案沒有解決，下面是我自己的解決過程。

1. 問題描述

  • 我們用的套殼Android，網頁釋出在遠端伺服器，Android殼安裝在ipad上
  • 前端用的元件是el-upload，點選後可以選擇，拍攝圖片上傳
  • 選擇，拍攝一個檔案沒有問題，選擇多個檔案也沒有問題，就是拍攝多張圖片點選儲存的時候報錯
  • 選擇圖片的時候監聽el-upload元件的on-change方法得到檔案列表uploadFiles
  • 拍攝多張圖片的時候，點選提交，拿到檔案列表，迴圈呼叫介面上傳

2. 問題分析

打斷點看到能夠能夠獲取到檔案列表，並且每次拍攝完都觸發on-change事件，問題在從第二次後，uploadFiles陣列中的最後一個是原生檔案型別，其他都是代理（Proxy）型別，也是奇怪，如下圖：
第一次
image

第二次
image

很明顯第二次兩個檔案中的第一個是一個代理型別，不是純檔案型別

3.問題解決

個人猜想可能是拿這個Proxy物件調介面的時候，介面不能識別造成的，於是思路就有了，既然是Proxy型別，那就可以用toRaw方法來把它還原成原生的檔案型別，關鍵程式碼如下：

<!-- 拍照上傳 -->
<el-upload
  v-else-if="p.enforceShape == formShape.ELCAMERA"
  v-model:file-list="p.value"
  class="upload-demo"
  accept="image/*"
  :multiple="p.multiple"
  :on-remove="(file, list) => onUpload(p.prop, {file, list},'remove')"
  :on-change="(file, list) => onUpload(p.prop, {file, list},'change')"
  :auto-upload="false"
  list-type="picture">
  <el-button type="primary">上傳圖片</el-button>
</el-upload>

const onUpload = (prop, val, type) => {
  let list = []
  if (val.list.length > 0) {
    for (let i = 0; i < val.list.length; i++) {
      let file =  toRaw(val.list[i])
      list.push(file)
    }
  }
  emit('onUpload', prop, {list}, type)
}

最後這樣問題就解決了。

3.總結

網上很多都是修改檔案後，之前上傳的檔案已經不存在了，要把檔案轉成base64格式，上傳的時候再轉回來，這個對我這個問題不太適用。如下：
https://blog.csdn.net/qubes/article/details/129061173

相關文章