iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue elementUI 处理文件批量上传方式
  • 742
分享到

vue elementUI 处理文件批量上传方式

2024-04-02 19:04:59 742人浏览 独家记忆
摘要

目录elementUI 如何处理文件批量上传问题解决elementUI 批量上传下载注意事项在el-upload组件关键的钩子,其它省略点击上传,将多个文件和表单数据一起上传elem

elementUI 如何处理文件批量上传

问题

elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件;但是在处理的时候还是一个一个传上去。

目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒

解决

this.$refs.upload.uploadFiles 

该属性可以获取上传的文件相关信息,包括上传后后端返回的response

html

el-upload
  ref='upload'
  class="upload-demo"
  action="https://JSONplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :on-success='upLoadSuccess'
  accept=".doc,.docx">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传doc/docx文件</div>
</el-upload>

方法处理 

upLoadSuccess(response, file, fileList) {
    if (this.$refs.upload.uploadFiles) {
        let length = this.$refs.upload.uploadFiles.length
        this.UpLoadFilesLength ++  // 全局变量,用来计算upLoadSuccess方法调用次数
        if (this.UpLoadFilesLength == length) {
            this.UpLoadAllFilesLength = 0  // 如果方法调用的次数和文件列表的长度相同,说明所有文件都上传完毕,将该全局变量置0
            this.resErrorStr() // 该函数处理每个文件上传错误情况下response拼接
        }
    }
},
resErrorStr() {
    if (this.$refs.upload.uploadFiles) { // 如果存在这个值
        let filesList = this.$refs.upload.uploadFiles.slice()
        let UpLoadAllErrorStr = '' // 错误信息拼接变量
        for (let i = 0; i < filesList.length; i++) {
            if (filesList[i].response) {
                if (filesList[i].response.code != 200) { // 如果该文件上传后返回的状态值不是200,则说明该文件上传错误
                    UpLoadAllErrorStr += `${filesList[i].response.message}<br/>`
                }
            }
        }
        if (!UpLoadAllErrorStr) {
            this.$message({ type: 'success', message: '上传文件成功!' });
        } else {
            this.$message({
                type: 'error',
                dangerouslyUseHTMLString: true,
                message: UpLoadAllErrorStr
            });
        }
        this.$refs.uploadAll.uploadFiles = [] // 调用完成之后将值置空,防止再次上传将上次结果也记录下来
    }
},
handleRemove(file, fileList) {
    console.log(file, fileList);
},
handlePreview(file) {
    console.log(file);
},
beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${ file.name }?`);
}

elementUI 批量上传下载注意事项

批量手动上传文件,和表单数据一起提交

在el-upload组件关键的钩子,其它省略

  • multiple
  • :auto-upload = "false"
  • :file-list = "fileList"
  • :on-change = "selectFile"  (里面是把上传的fileList传给自定义的  this.fileList)

点击上传,将多个文件和表单数据一起上传

a.定义FORMData,将表单数据和文件填充到FormData里面

b.自定义请求头部,Content-type:‘multipart/form-data’

let formData = new FormData()
for(let key in data){
    if(data[key]){
      formData.append(key,data[key])
    } 
}
this.fileList.forEach((element,i) =>{
  formData.append('fileList',element.raw)
})
let rs = await axiOS({
  method:'post',
  url: cfg.uploadURL + '/sp/addSp',
  data: formData,
  headers:{
    'Content-type':'multipart/form-data'
  } 
})

表格中上传文件中,组件钩子函数自带参数

<el-upload
  class="upload-demo"
  action="Https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="(file,fileList)=>{
     return beforeRemove(file,fileList,scope.$index)
  }"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
beforeRemove(file,fileList,index){
    console.log(index)
}

批量下载(后台不返回压缩包,前端就一个个下载了)

download(val){
  let vals = val.split(',') //后台返回的文件标识符数组
  vals.forEach((element) =>{
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.height = 0;
    iframe.src = cfg.baseURL+'下载路径'+element; 
    document.body.appendChild(iframe); 
    setTimeout(()=>{
      iframe.remove();
    }, 1000)
  })
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue elementUI 处理文件批量上传方式

本文链接: https://www.lsjlt.com/news/147427.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue elementUI 处理文件批量上传方式
    目录elementUI 如何处理文件批量上传问题解决elementUI 批量上传下载注意事项在el-upload组件关键的钩子,其它省略点击上传,将多个文件和表单数据一起上传elem...
    99+
    2024-04-02
  • vue elementUI怎么处理文件批量上传
    这篇文章主要介绍了vue elementUI怎么处理文件批量上传的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue elementUI怎么处理文件批量上传文章都会有所收获,下面我们一起来看...
    99+
    2023-06-30
  • 批处理FTP上传文件脚本分享
    本篇内容主要讲解“批处理FTP上传文件脚本分享”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“批处理FTP上传文件脚本分享”吧!背景:本机一个文件“A.TXT"在C盘根目录下,需要上传到...
    99+
    2023-06-08
  • php文件批量上传的方法是什么
    批量上传文件的方法在PHP中可以通过使用循环和表单来实现。以下是实现批量上传文件的基本步骤:1. 创建一个HTML表单,其中包含一个...
    99+
    2023-08-26
    php
  • vue文件批量上传及进度条展示的实现方法
    目录主要实现功能上传初始化逻辑uploadStore()multiUpload() multiRun()uploadAsync(fileInfo)总结主要实现功能 1.多文...
    99+
    2022-12-24
    vue实现批量上传 vue 多文件上传 vue进度条样式
  • myBatis的mapper映射文件之批量处理方式
    目录mybatis批量插入mybatis批量删除mybatis批量修改myBatis mapper文件详解Mapper文件中包含的元素有mybatis支持别名:jdbcType与Ja...
    99+
    2024-04-02
  • 怎么使用ssh批量上传文件
    本篇内容介绍了“怎么使用ssh批量上传文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、scp上传不要输入密码如果要用scp来上传文件,...
    99+
    2023-06-27
  • jQuery图片批量上传插件源码,支持批量上传、预览、删除、放大,可配置上传数量、上传大小、追加方式,含详细使用文档
    jQuery图片批量上传插件源码,支持批量上传、预览、删除、放大,可配置上传数量、上传大小、追加方式,含详细使用文档 程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码 上传前 ...
    99+
    2023-09-01
    jquery php javascript
  • 详解Vue ElementUI手动上传excel文件到服务器
    目录概述属性设置处理逻辑概述 具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来。官网也有手动上传的示例,通...
    99+
    2024-04-02
  • fastadmin上传文件回调和实现自定义批量上传
    文章目录 前言一、上传回调二、批量上传总结 前言 Fastadmin是基于thinkphp5得一个快速开发开源框架,在市面上很流行,里边自定义了上传文件得方法,只需要简单调用即可使用...
    99+
    2023-09-01
    javascript html php
  • java多线程批量上传文件的方法是什么
    Java中实现多线程批量上传文件可以通过以下步骤来实现:1. 创建一个线程池,用于管理上传文件的线程。```javaExecutor...
    99+
    2023-09-13
    java
  • Java多线程实现FTP批量上传文件
    本文实例为大家分享了Java多线程实现FTP批量上传文件的具体代码,供大家参考,具体内容如下 1、构建FTP客户端 package cn.com.pingtech.common.ft...
    99+
    2024-04-02
  • VUE+ElementUI下载文件的几种方式(小结)
    1.创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流 <a :href='"/user/downloadExcel"' >下载模板</a>...
    99+
    2023-01-13
    VUE Element下载文件 vue 下载文件
  • JavaScript大文件上传的处理方法之切片上传
    目录前言切片后上传生成hash文件秒传暂停上传中断请求示例添加暂停上传功能恢复上传添加功能总结前言 本篇介绍了切片上传的基本实现方式(前端),以及实现切片上传后的一些附加功能,切片上...
    99+
    2024-04-02
  • java怎么批量上传文件到服务器
    要批量上传文件到服务器,可以使用Java中的FTP客户端库来实现。以下是一个使用Apache Commons Net库的示例代码: ...
    99+
    2023-10-27
    java 服务器
  • 处理上传的 csv 文件
    编程并不是一个机械性的工作,而是需要有思考,有创新的工作,语法是固定的,但解决问题的思路则是依靠人的思维,这就需要我们坚持学习和更新自己的知识。今天编程网就整理分享《处理上传的 csv 文件》,文章...
    99+
    2024-04-04
  • 如何使用批处理上传文件到ftp目录下
    小编给大家分享一下如何使用批处理上传文件到ftp目录下,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!为了快速将项目中开发的补丁程序通过ftp快速上传到linux下...
    99+
    2023-06-08
  • 【Java】对Minio指定Bucket大量文件的批量下载与本地文件夹的批量上传
    文章目录 需求批量下载代码效果 批量上传代码效果 需求 需要批量下载一个bucket下的内容,bucket下文件有19GB+,且文件夹结构复杂,使用官方的Console无法完成这么...
    99+
    2023-09-24
    java Minio 对象存储 上传下载
  • Python实现文件名批量处理
    我们知道文件名是可以手动修改的,但是如果要同时修改多个文件名,那一个一个修改会浪费掉很多时间,此时我们就可以考虑使用python来实现文件名的批量处理。想要批量处理文件名首先确定需要处理的文件名,以及确定处理后新的文件名,这样就可以开始处理...
    99+
    2023-06-02
  • DOS批处理文件的方法
    本篇内容主要讲解“DOS批处理文件的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“DOS批处理文件的方法”吧!DOS下的可执行文件有三种,分别是EXE,COM和BAT。其中,EXE和COM文...
    99+
    2023-06-09
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作