el-upload拍照上傳多個文件報錯 ERR_UPLOAD_FILE_CHANGED問題

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

1. 問題描述

• 我們用的套殼Android，網頁發布在遠程服務器，Android殼安裝在ipad上
• 前端用的組件是el-upload，點擊后可以選擇，拍攝圖片上傳
• 選擇，拍攝一個文件沒有問題，選擇多個文件也沒有問題，就是拍攝多張圖片點擊保存的時候報錯
• 選擇圖片的時候監聽el-upload組件的on-change方法得到文件列表uploadFiles
• 拍攝多張圖片的時候，點擊提交，拿到文件列表，循環調用接口上傳

2. 問題分析

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

第二次

很明顯第二次兩個文件中的第一個是一個代理類型，不是純文件類型

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
https://stackoverflow.com/questions/57516930/prevent-html-file-input-from-selecting-files-in-google-drive-while-using-android