Vue el-upload插件上传批量文件

el-upload 上传多个文件的时候。是一个文件接着一个上传的。但是如果说我们想一次性上传所有的文件，然后后台统一处理呢。那我们就要想着怎么做。下面列出来:

第一步。引用el-upload插件

<el-uploadref="upload":action="getUploadAction":on-success="uploadSuccess":on-error="uploadError":before-remove="beforeRemove"multiple:limit="10":headers="getToken":on-exceed="handleExceed":on-change="handleChange":auto-upload="false":http-request="httpRequest":file-list="fileList"><el-button size="small" type="primary">上传文件</el-button>
</el-upload>

:action="getUploadAction" ：这个东西你甚至可以填个"/"就行。

multiple：这个属性是要的。注意了这个是控制能传多个文件。

:limit="10"：这个是控制了上传文件的个数

:auto-upload="false" 这个很重要，这个控制

this.$refs.upload.submit(); 走不走:action="getUploadAction"的这个属性。

如果没有这个属性。后台点击上传文件的按钮会直接走action的后台接口

第二步我是后续加了个按钮来实现文件的上传的

<el-button size="small" type="primary" @click="submitImport">{{$t('comm.import')}}</el-button>

第三步前台传给后台的时候。特别要注意。我们是要用form格式去传过去的。具体的写法我贴在后面：

let upData = new FormData();
upData.append("JsonStr", JSON.stringify(DTO))for(let i=0;i<this.$refs.upload.uploadFiles.length;i++){upData.append("file",this.$refs.upload.uploadFiles[i].raw);
}
upData.append('contentType',"multipart/form-data;")

里面的定义。jsonStr是传到后台的json格式的字符串。file是具体的文件。contentType这个是我用来逻辑处理的，你们可以不填。

这个我要说明一下。网上好多人说要用:http-request="httpRequest"这个属性里的httpRequest的来拼接文件。但是我具体使用下来，发现这个写法，如果上传多次，文件是会被多次放进去的。也就是第一次是五个文件的话，第二次直接变成十个文件。

剩下来就是

axios.post(url, data)

网上的写法就行。但是如果你的axios的底层是定义过的话。

那你要去找

axios.interceptors.request.use(config => {

})

config.headers = {'Content-Type': contentType,'Accept-Language': store.state.language
}

把这里面的context-Type 变成multipart/form-data；

config.data也要注意。直接传过去就行。

第四步后台接收。好多人都没写到这一步

  @RequestParam(value = "file", required = false)List<MultipartFile> multipartFiles,String JsonStr

接收的参数是这个玩意。然后直接去解析就行

Vue el-upload插件上传批量文件相关推荐

使用el upload标签上传文件的几种常见使用场景（前台+后台）
前言:本篇博客主要介绍ElementUI中el upload上传控件的使用,包含前后台代码. 文章目录一.总体代码二.使用场景 1.添加 2.修改 3.单独上传到服务器一.总体代码 1.前端控件 ...
Vue：使用elementUI upload组件上传excel文件
<template><div><el-upload dragaction="" :http-request="upload" :b ...
使用elementui实现表单上传功能_使用ElementUI中的upload组件上传Excel文件
最初使用该组件实现图片上传是没有问题的,前后端配合,最终实现想要的效果,组件使用过代码如下: 将文件拖到此处,或点击上传现在改为使用该组件实现Excel文件上传,组件的使用几乎是不变的,代码如下: ...
Antd的Upload组件上传文件控制文件数量、格式等，以及提交时如何获取文件
背景:使用React的antd组件的Upload(官网),要求文件上传后,在点击提交时再将文件传过去. 技术点: 完全控制的文件上传. 可控制上传数量. 控制文件格式. 移除时的事件onRemove. ...
vue 使用视频流 formdata上传视频文件并且限制视频大小格式
需求代码 <div class="f2-sub_btn"><van-button type="primary" block><s ...
[Asp.net]Uploadify上传大文件，Http error 404 解决方案 - wolfy
引言之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章: [Asp.net]Up ...
cmd远程连接上传下载文件
远程连接上传下载文件问题上传文件 put filename 下载文件 get filename 下载文件夹首先在远程新建一个文件(命名和本地相同) mkdir hello_python 并且cd到 ...
vue excel导入mysql详细教程_Vue前端上传EXCEL文件，后端（springBoot+MyBatis+MySQL）解析EXCEL并批量插入/更新数据库...
文章目录 Vue前端后端 controller层 service层:如何解析Excel文件 MyBatis:实现批量插入在mysql中设置唯一索引Unique Index MySQL中的inser ...
vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
vue php 文件上传,使用vue.js和laravel上传文件
我尝试在vue.js和laravel中上传pdf文件,files_array是这样定义的:data(){ return { formData: new Form ({ files_array:'', ...

Vue el-upload插件上传批量文件

Vue el-upload插件上传批量文件相关推荐

最新文章

热门文章