JavaScript
vue+el-upload实现多文件动态上传
发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue+el-upload实现多文件动态上传，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
vue+el-upload多文件动态上传，供大家参考，具体内容如下
使用场景
点击【添加/删除】，可动态增加/删除行数，并为每行上传附件，附件暂存前端，点击【上传】可以将所有附件和部分名称同时提交后台，实现表格的动态多文件上传。其中el-upload ，相关钩子函数可查看el-upload 官方文档
这里的表格行的新增是在弹框中填完再写入的，也可直接在表格中添加行，然后填写内容（template slot-scoPE=“scope” 注释部分代码），这里仅提供思路
代码htML部分
<div class="vue-box">
<div class="tITle-line">
其他必须持有的证照<el-button type="Primary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="handleAddDetails">添加行</el-button>
<el-button type="PRimary" size="mini" style="height: 20px;padding-top: 3px !important;margin-left: 50px" icon="el-icon-plus" @click="doFileUpload()">上传</el-button>
</div>
<el-table
:row-class-name="rowclassnameDeal"
:data="tableData"
style="width: 100%;">
<el-table-column
prop="id"
width="50"
label="序号">
</el-table-column>
<el-table-column
prop="cardName"
width="180"
label="证照名称">
<!--<template slot-scope="scope">
<el-input size="mini" v-model="tableData[scope.row.id-1].cardName"></el-input>
</template>-->
</el-table-column>
<el-table-column
prop="cardNo"
width="180"
label="证件号码">
<!--<template slot-scope="scope">
<el-input size="mini" v-model="tableData[scope.row.id-1].cardNo"></el-input>
</template>-->
</el-table-column>
<el-table-column
prop="startDate"
width="180"
label="起始日期">
<!--<template slot-scope="scope">
<el-date-picker
v-model="tableData[scope.row.id-1].startDate"
style="width: 80%;"
size="mini"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>-->
</el-table-column>
<el-table-column
prop="endDate"
width="180"
label="结束日期">
<!--<template slot-scope="scope">
<el-date-picker
v-model="tableData[scope.row.id-1].endDate"
style="width: 80%;"
size="mini"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
</template>-->
</el-table-column>
<el-table-column
prop="address"
label="附件">
<template slot-scope="scope">
<el-upload
:ref="scope.row.cardName"
:http-request="dynamicUpload"
:before-upload="beforeUploaDFile(scope.row)"
:on-remove="uploadRemove"
:before-remove="uploadBeforeRemove"
:on-p@R_406_2866@iew="uploadPreview"
name="upload"
:limit="1"
:data="scope.row.cardName"
:on-exceed="uploadHandleExceed"
:file-list="tableData[scope.row.id-1].fileUploadedList">
<el-button size="mini" type="info">点击上传</el-button>
</el-upload>
</template>
</el-table-column>
<el-table-column
prop="date"
width="80"
label="操作">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="handleDeleteDetails(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-diaLOG title="证照信息" :visible.sync="addCardVisible" width="40%">
<el-form :model="fileInfo">
<el-form-item label="证照名称" :label-width="labelWidth">
<el-input v-model="fileInfo.cardName" autocomplete="off" style="width: 100%;"></el-input>
</el-form-item>
<el-form-item label="证件号码" :label-width="labelWidth">
<el-input v-model="fileInfo.cardNo" autocomplete="off" style="width: 100%;"></el-input>
</el-form-item>
<el-form-item label="生效日期" :label-width="labelWidth">
<el-date-picker type="date" placeholder="生效日期" value-format="yyyy-MM-dd" v-model="fileInfo.startDate" style="width: 100%;"></el-date-picker>
</el-form-item>
<el-form-item label="失效日期" :label-width="labelWidth">
<el-date-picker type="date" placeholder="失效日期" value-format="yyyy-MM-dd" v-model="fileInfo.endDate" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addCardVisible = false">取 消</el-button>
<el-button type="primary" @click="addFileDetail">确 定</el-button>
</div>
</el-dialog>
</div>
js部分代码
let nodeVue = new Vue({
el: '.vue-box',
data: {
labelWidth: '150px',
tableData: [],
uploadParams:{
fileTagName: ''
},
totalFileList:[],
totalFileNameList:[],
addCardVisible:false,
fileInfo:{
cardName:'',
cardNo:'',
startDate:'',
endDate:''
}
},
methods:{
// 文件相关
uploadRemove:function(file) {
let that = this;
// 删除文件列表中的文件
for(let i=0;i<that.totalFileNameList.length;i++){
if(that.totalFileNameList[i].fileName === file.name){
that.totalFileNameList.splice(i,1)
}
}
for(let i=0;i<that.totalFileList.length;i++){
if(that.totalFileList[i].name === file.name){
that.totalFileList.splice(i,1)
}
}
},
// 上传文件参数设置
beforeUploadFile:function(row) {
console.log(row.cardName);
this.uploadParams.fileTagName=row.cardName
this.uploadParams.fid=row.id
},
// 下载文件,点击文件列表中的文件下载
uploadPreview:function(file){
console.log(file);
},
uploadHandleExceed:function(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件`);
},
uploadBeforeRemove:function(file) {
return this.$confirm(`确定移除 ${ file.name }？`);
},
// 附件添加行,打开添加行弹框
handleAddDetails(){
let that = this;
that.addCardVisible = true;
that.fileInfo.cardName = '';
that.fileInfo.cardNo = '';
that.fileInfo.startDate = '';
that.fileInfo.endDate = '';
},
// 向表格数据中添加一行
addFileDetail(){
let that = this;
if (that.tableData == undefined) {
that.tableData = new Array();
}
let obj = {};
obj.id = 0;
obj.cardName = that.fileInfo.cardName;
obj.cardNo = that.fileInfo.cardNo;
obj.startDate = that.fileInfo.startDate;
obj.endDate = that.fileInfo.endDate;
obj.fileUploadedList=[];
that.tableData.push(obj);
that.addCardVisible = false;
},
// 删除行
handleDeleteDetails(row){
let that = this;
that.tableData.splice(row.id-1, 1);
//同时 删除文件列表及关联列表中的数据
let tmpFileName = '';
for(let i=0;i<that.totalFileNameList.length;i++){
if(that.totalFileNameList[i].cardName === row.cardName){
tmpFileName = that.totalFileNameList[i].fileName;// 先暂存再执行删除操作
that.totalFileNameList.splice(i,1);
}
}
for(let i=0;i<that.totalFileList.length;i++){
if(that.totalFileList[i].name === tmpFileName){
that.totalFileList.splice(i,1)
}
}
},
rowClassNameDeal({row, rowIndex}) {
//把每一行的索引放进row.id,此方法用于生成表格中的序号，当在表格中填写内容时，每一行都需要绑定不同的v-model
row.id = rowIndex+1;
},
// 自定义上传，只将文件暂存在前端
dynamicUpload(content){
let that = this;
if(content.data.length === 0){
that.$message.warning(`请填写证照名称！！！`);
that.$refs[content.data].clearFiles();
return false;
}
for(let i=0;i<that.totalFileNameList.length;i++){
if(that.totalFileNameList[i].fileName === content.file.name){
that.$message.warning('改文件已上传，请重新选择文件上传！！！');
that.$refs[content.data].clearFiles();
return false;
}
}
// 将文件加入到待传输的文件列表
that.totalFileList.push(content.file)
let fileNameData = {
cardName: content.data,
fileName: content.file.name
}
// totalFileNameList 存储文件和表格内容的关联关系，这里只关联了证照名称
that.totalFileNameList.push(fileNameData)
},
// 执行上传操作将文件和表格信息一起发送到后台
doFileUpload(){
let that = this;
if(that.totalFileList.length === 0){
that.$message.warning("请上传文件！！！");
return;
}
// 上传文件需要用FormData，proceSSData和contentType 两个参数必须设置，否则上传不成功
const params = new FormData();
// 为上传的每个文件命名，方便后台获取时与表格数据关联
for (let i = 0; i < that.totalFileList.length; i++) {
params.append(that.totalFileList[i].name, that.totalFileList[i]);
}
params.append("fileNameList", JSON.stringify(that.totalFileNameList));
$.ajax({
url:baseurl+"/testupload/fileUpload",
type:"POST",
dataType: "json",
processData: false, //用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
data:params,
success:function(res){
that.$message.warning('上传成功');
}
});
}
},
created: function(){
}
})
后台接收代码
@Controller
@RequestMapping("/testupload")
public class RegisterController {
// 附件从 request中获取
@RequestMapping("/fileUpload")
@ResponseBody
public ServerResponse fileupload(HttpServletRequest request,String fileNameList){
try{
if(fileNameList == null){
throw new Exception("请选择文件后上传！！！");
}
// 1. 上传的位置
String path = "E:\\uploadfile";
//判断该路径是否存在
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
// 处理以字符串形式上传的关联数据信息
JSONArray jsonArray = JSON.parseArray(fileNameList);
// 遍历关联列表
for(Object object : jsonArray){
JSONObject jsonObject = JSON.parseObject(object.toString());
System.out.println(jsonObject.getString("cardName"));
// 获取文件
MultipartFile file1 = ((MultipartHttpServletRequest) request).getFile(jsonObject.getString("fileName"));
// 获取文件信息
String filename = file1.getOriginalFilename();
System.out.println(filename);
// 保存文件
file1.transferTo(new File(path, filename));
}
}catch (Exception e) {
log.error(e.getMessage());
return ServerResponse.createByErrorMessage(e.getMessage());
}
return ServerResponse.createBySuccess();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。
您可能感兴趣的文章:
脚本宝典总结
以上是脚本宝典为你收集整理的vue+el-upload实现多文件动态上传全部内容，希望文章能够帮你解决vue+el-upload实现多文件动态上传所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的JavaScript相关文章
- html font标签如何设置字体大小？html font标签属性用法介绍 2022-05-16
- vue3+TypeScript+vue-router的使用方法 2022-04-16
- vue3获取当前路由地址 2022-04-16
- 如何利用React实现图片识别App 2022-04-16
- JavaScript展开运算符和剩余运算符的区别详解 2022-04-16
- 微信小程序中使用vant框架的具体步骤 2022-04-16
- Vue elementUI表单嵌套表格并对每行进行校验详解 2022-04-16
- 如何利用Typescript封装本地存储 2022-04-16
- 微信小程序中wxs文件的一些妙用分享 2022-04-16
- JavaScript的Set数据结构详解 2022-04-16
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
- html font标签如何设置字体大小？html font标签属性用法介绍
- html中的document对象是什么？一篇文章让你了解document对象
- xhtml与html之间有什么区别？xhtml与html之间的异同分析
- HTML <a> download属性使用方法详解
- html中b标签和strong标签的区别是什么？b和strong区别的总结
- html下拉菜单怎么做？html下拉菜单的代码实例介绍
- html单选按钮默认选中怎么做？input标签的单选按钮用法实例
- html文本域标签属性有哪些？html文本域标签属性用法介绍
- html图片怎么等比例缩放？html img图片缩放方法总结(附实例)
- html中col标签中的汉字如何居中？html col标签的基本使用(内有实例)
热门JavaScript教程
- html font标签如何设置字体大小？html font标签属性用法介绍
- html中的document对象是什么？一篇文章让你了解document对象
- xhtml与html之间有什么区别？xhtml与html之间的异同分析
- HTML <a> download属性使用方法详解
- html中b标签和strong标签的区别是什么？b和strong区别的总结
- html下拉菜单怎么做？html下拉菜单的代码实例介绍
- html单选按钮默认选中怎么做？input标签的单选按钮用法实例
- html文本域标签属性有哪些？html文本域标签属性用法介绍
- html图片怎么等比例缩放？html img图片缩放方法总结(附实例)
- html中col标签中的汉字如何居中？html col标签的基本使用(内有实例)