vue+el-upload實現多檔案動態上傳
阿新 • • 發佈：2021-10-18
+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"
部分程式碼
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 = '';
http://www.cppcns.com
後臺接收程式碼
@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();
}
// 處理以字串形式上傳的關聯資料資訊
http://www.cppcns.com 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();
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。