小编点评

这个问题描述了一个在尝试连续上传多个图片时出现的错误：当使用`el-upload`组件进行多张图片上传时，点击保存按钮会导致错误`ERR_UPLOAD_FILE_CHANGED`。经过一番研究，我找到了问题的原因并提出了相应的解决方案。 ### 问题描述 在安卓平台上，使用`el-upload`组件上传图片时，在连续拍摄多张图片并在点击保存时，会出现报错`ERR_UPLOAD_FILE_CHANGED`。问题出现在能够获取到文件列表，并且在每次拍摄完成后触发`on-change`事件。但是，从第二次开始，上传的文件列表中的最后一个文件会是代理（Proxy）类型，而其他文件为纯文件类型。 ### 问题分析 通过打断点观察，可以看到在获取文件列表时，能够成功获取到所有文件。但是，在将文件列表传递给接口进行上传时，问题出现了。问题可能出在处理这些文件时，接口无法识别代理类型的文件。 ### 问题解决 为了解决这个问题，我尝试使用`toRaw()`方法将Proxy对象转换回原始文件类型。具体做法如下： ```javascript 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); }; ``` 通过这种方法，将Proxy对象转换为原始文件类型后，再将其传递给接口进行上传，从而解决了问题。 ### 总结 在这个特定的场景中，我的解决方案是通过使用`toRaw()`方法将Proxy对象转换回原始文件类型来解决`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