vue+el-upload实现多文件动态上传
更新时间:2021年10月18日 09:10:51 作者:ichuany
这篇文章主要为大家详细介绍了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-preview="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.js中settimeout遇到的问题(时间参数短效果不稳定)
这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07使用el-checkbox-group选中后值为true和false遇到的坑
这篇文章主要介绍了使用el-checkbox-group选中后值为true和false遇到的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
最新评论