el-upload自定义上传,element upload 手动上传

　　主要介绍el-upload多选文件上传错误的解决方法，通过示例代码非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

　　在element-ui中，el-upload可以进行文件多选操作。

　　当上传多个文件时，会循环调用upload方法。在第一个周期中，文件可以正常上传，第二个周期将在

　　正在进行的事件中报告了错误：

　　尝试上传2个文件，在此处打印进度事件的参数：

　　会发现在第二个循环中，事件无法获取文件，所以下一个操作无法正常进行。如果不处理这个问题，上传方法还是可以用的，但是最后只上传第一个文件。

　　目前不知道是什么原因造成了这个结果。但搜索相关问题后，找到了解决方案：

　　上传多个文件时，创建一个中间变量来添加和删除文件。原来的filelist只显示页面列表，提交表单时处理数据，把中间变量的值重新赋给界面需要的字段。这样做的目的是避免直接操作filelist。

　　这里只显示了代码的关键部分：

　　/**

　　*文件：上传成功后的文件参数。

　　* ismultiple: true=多选；真：=单项选择

　　*/

　　handlePictureSuccess(file，isMultiple){

　　//单选和多选是可配置字段，这里分别处理。

　　if(isMultiple){

　　//文件返回大量数据，只添加需要的数据。

　　this . real file list . push({ path:file . path，name:file.name，url:file.url})

　　}否则{

　　this . file list . push({ path:file . path，name:file.name，url:file.url})

　　}

　　},

　　/**

　　*提交表单

　　*形式：形式

　　*/

　　提交Fn(表单){

　　const文件列表=[]

　　这个。$参考文献。Form.realFileList.forEach(el={

　　fileList.push(el)

　　})

　　},

　　关于el-upload多选文件上传错误的解决方法这篇文章就到这里了。更多关于el-upload多选文件上传的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。