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方法来把它还原成原生的文件类型,关键代码如下:

html 复制代码
<!-- 拍照上传 -->
<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>
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)
}

最后这样问题就解决了。

3.总结

网上很多都是修改文件后,之前上传的文件已经不存在了,要把文件转成base64格式,上传的时候再转回来,这个对我这个问题不太适用。如下:
https://blog.csdn.net/qubes/article/details/129061173

相关推荐
东东23316 分钟前
前端规范工具之husky与lint-staged
前端·javascript·eslint
岁月宁静41 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·javascript·vue.js
atwednesday1 小时前
日志处理
javascript
#做一个清醒的人1 小时前
【electron6】Web Audio + AudioWorklet PCM 实时采集噪音和模拟调试
前端·javascript·electron·pcm
拉不动的猪1 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
rit84324992 小时前
ES6 箭头函数:告别 `this` 的困扰
开发语言·javascript·es6
摸鱼的春哥2 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
webxin6662 小时前
页面动画和延迟加载动画的实现
前端·javascript
duandashuaige3 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
渣哥3 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试