el-upload多选文件上传报错解决方案

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

在多选文件上传时，会循环调用上传方法。在第一次循环时，文件可以正常上传，第二次开始就会在

progress事件中报错：

尝试上传2个文件，在这里打印progress事件的参数：

会发现在第二次循环的时候，事件获取不到file，所以接下来的操作无法正常进行。如果不处理这个问题的话，上传方法依然可以使用，只不过最终传上去的只是第一个文件。

本人目前还不知道是什么原因造成了这个结果。但是经过查找相关问题找到了解决办法：

在进行文件多选上传的时候，创建一个中间变量去进行对文件的添加和删除操作，原有的filelist只进行页面列表的显示，在提交表单的时候对数据进行处理，将中间变量的值重新赋给接口需要的字段。这么做的目的就是避免去直接操作filelist。

这里只展示关键部分代码：

    /**
     * file：上传成功后的文件参数
     * isMultiple：true=>多选；false：=>单选
     */
    handlePictureSuccess(file,isMultiple){
        // 单选、多选是可配字段，在这里进行分别处理
        if(isMultiple){

          ···

          // file返回的数据很多，只添加需要的数据
          this.realFileList.push({path:file.path,name:file.name,url:file.url})

          ···

        }else{

          ···

          this.fileList.push({path:file.path,name:file.name,url:file.url})

          ···

        }
    },

    /**
     * 提交表单
     * form：表单
     */
    submitFn(form){

      ···
      const fileList = []
      this.$refs.Form.realFileList.forEach(el=>{
        fileList.push(el)
      })

      ···

    },

到此这篇关于el-upload多选文件上传报错解决方案的文章就介绍到这了,更多相关el-upload多选文件上传 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue使用el-upload实现文件上传功能

    因为我是vue+springboot前后分离,要跨域,就不能用默认的action写请求地址,我用axios时最困扰的就是怎么拿到那个真实的文件,然后给传给后台. 其实可以通过自带的onchanne触发方法获得文件列表,文件信息中那个raw就是真实的文件. 写的时候,刚开始我是直接把el-upload里面的button中加了点击事件,但是每次文件还没选,就已经向后台发出请求了,当然传不过去,于是外面套了个form. element-ui组件使用可以查看文档 upload.vue <template

  • el-upload http-request使用 多个文件上传携带其他参数方式

    目录 el-upload http-request使用 el-upload自定义http-request上传踩坑 el-upload http-request使用 1.http-request:覆盖默认的上传行为,可以自定义上传的实现 2.不需要给action关联上传的地址,但是action这个属性必须写 3.在http-request自定义上传事件中将上传文件保存到一个数组中 4. 接口使用formData表单数据格式传参, 将上传的文件和其他参数一起传给接口,使用的方法是new FormDa

  • el-upload多选文件上传报错解决方案

    el-upload多选文件上传报错解决方案

    在element-ui中,el-upload可以进行文件多选操作. 在多选文件上传时,会循环调用上传方法.在第一次循环时,文件可以正常上传,第二次开始就会在 progress事件中报错: 尝试上传2个文件,在这里打印progress事件的参数: 会发现在第二次循环的时候,事件获取不到file,所以接下来的操作无法正常进行.如果不处理这个问题的话,上传方法依然可以使用,只不过最终传上去的只是第一个文件. 本人目前还不知道是什么原因造成了这个结果.但是经过查找相关问题找到了解决办法: 在进行文件多选

  • 解决feign微服务间的文件上传报错问题

    解决feign微服务间的文件上传报错问题

    A微服务调用B服务的上传文件接口报错: the request was rejected because no multipart boundary was found spring cloud版本 H <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-dependencies</artifactId> <version>

  • IIS FTP部分文件上传报错451的原因及解决方法

    IIS FTP部分文件上传报错451的原因及解决方法

    最近部署一个基于IIS7的ftp服务器,添加一个组的用户具有上传及读取权限,使用Flashfxp软件测试了不同文件的上传下载,均可以正常使用.由于之前建FTP出现过使用浏览器访问不能验证用户的问题,于是也用浏览器进行测试,访问正常.正高兴呢.结果测试传几个文件遇到问题了.部分文件可以正常上传,但部分报错,具体错误提示如下: 找了下资料,发现原来是万国码问题,具体解决方法如下: 在FTP管理器的右边点击"高级设置"--将"允许UTF8"改为[False],如下图:

  • asp.net批量多选文件上传解决方案

    asp.net批量多选文件上传解决方案

    多选文件上传,已经非常多了,选择性多了可能有时候要比较下哪个更合适,结合到项目中使用更方便才是最重要的.很多的多选上传基本上都是调用的swf文件,确实用flash 或flex开发一个多选上传的功能很方便,比如flex里内置的FileReferenceList对象本身就支持文件的多选,有这个的话就方便多了,下面要说的主要也是基于flex开发的一个多选上传功能. 主要实现的功能如下: 一.选择多个文件上传并显示单个文件的上传进度 二.显示所有文件总的上传进度 三.显示所有上传文件的总大小 四.上传前

  • js ajaxfileupload.js上传报错的解决方法

    相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.coding/mobi/file/uploadSingleFile.html',//处理图片脚本 secureuri :false, fileElementId :'image2',//file控件id.就是input type="file" id="image2" data

  • element-ui upload组件多文件上传的示例代码

    之前有一篇写的如何同时传递form表单及upload组件文件,如果有多个upload文件该如何传递呢 上代码 html <el-form ref="newform" :model="newform" :rules="rules"> <el-form-item prop="expName" label=""> <el-input v-model="newform.exp

  • Springboot文件上传出现找不到指定系统路径的解决

    Springboot文件上传出现找不到指定系统路径的解决

    目录 Springboot文件上传出现找不到指定系统路径 1.问题描述 2.问题分析 3.问题解决方案 SpringBoot 上传文件时本地路径无效 错误产生的原因 解决方式有以下几点 Springboot文件上传出现找不到指定系统路径 1.问题描述 关键字:SpringMVC 4.2.4.Spring Boot 1.3.1.Servlet 3.0.文件上传 报错信息: java.io.IOException: java.io.FileNotFoundException: /tmp/tomcat

  • resty upload无需依赖的文件上传与下载

    目录 1.文件上传 a.看看@FIEL注解的属性 b.在application.properties设置上传的默认值 c.在服务端使用@FILE注解来接收文件流数据 2.文件下载 a.直接通过returnfile来向客户端输出文件 1. 文件上传 a. 看看@FIEL注解的属性 /** * 上传文件时使用该注解 设置文件相关参数 */ @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.METHOD) @Documented publi

  • AjaxUpLoad.js实现文件上传功能

    AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前 图2 文件上传后 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></span> <input type="hidden"

  • AjaxUpLoad.js实现文件上传

    AjaxUpload.js文件的代码,供大家参考,具体内容如下 /** * AJAX Upload ( http://valums.com/ajax-upload/ ) * Copyright (c) Andris Valums * Licensed under the MIT license ( http://valums.com/mit-license/ ) * Thanks to Gary Haran, David Mark, Corey Burns and others for cont

随机推荐