vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳
更新時(shí)間：2021年10月18日 09:10:51 作者：ichuany
這篇文章主要為大家詳細(xì)介紹了vue+el-upload實(shí)現(xiàn)多文件動(dòng)態(tài)上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue+el-upload多文件動(dòng)態(tài)上傳，供大家參考，具體內(nèi)容如下
使用場(chǎng)景
點(diǎn)擊【添加/刪除】，可動(dòng)態(tài)增加/刪除行數(shù)，并為每行上傳附件，附件暫存前端，點(diǎn)擊【上傳】可以將所有附件和部分名稱同時(shí)提交后臺(tái)，實(shí)現(xiàn)表格的動(dòng)態(tài)多文件上傳。其中el-upload ，相關(guān)鉤子函數(shù)可查看el-upload 官方文檔
這里的表格行的新增是在彈框中填完再寫(xiě)入的，也可直接在表格中添加行，然后填寫(xiě)內(nèi)容（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="序號(hào)">
</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="證件號(hào)碼">
<!--<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="結(jié)束日期">
<!--<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">點(diǎn)擊上傳</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="證件號(hào)碼" :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:{
// 文件相關(guān)
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)
}
}
},
// 上傳文件參數(shù)設(shè)置
beforeUploadFile:function(row) {
console.log(row.cardName);
this.uploadParams.fileTagName=row.cardName
this.uploadParams.fid=row.id
},
// 下載文件,點(diǎn)擊文件列表中的文件下載
uploadPreview:function(file){
console.log(file);
},
uploadHandleExceed:function(files, fileList) {
this.$message.warning(`當(dāng)前限制選擇 1 個(gè)文件`);
},
uploadBeforeRemove:function(file) {
return this.$confirm(`確定移除 ${ file.name }？`);
},
// 附件添加行,打開(kāi)添加行彈框
handleAddDetails(){
let that = this;
that.addCardVisible = true;
that.fileInfo.cardName = '';
that.fileInfo.cardNo = '';
that.fileInfo.startDate = '';
that.fileInfo.endDate = '';
},
// 向表格數(shù)據(jù)中添加一行
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);
//同時(shí) 刪除文件列表及關(guān)聯(lián)列表中的數(shù)據(jù)
let tmpFileName = '';
for(let i=0;i<that.totalFileNameList.length;i++){
if(that.totalFileNameList[i].cardName === row.cardName){
tmpFileName = that.totalFileNameList[i].fileName;// 先暫存再執(zhí)行刪除操作
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}) {
//把每一行的索引放進(jìn)row.id,此方法用于生成表格中的序號(hào)，當(dāng)在表格中填寫(xiě)內(nèi)容時(shí)，每一行都需要綁定不同的v-model
row.id = rowIndex+1;
},
// 自定義上傳，只將文件暫存在前端
dynamicUpload(content){
let that = this;
if(content.data.length === 0){
that.$message.warning(`請(qǐng)?zhí)顚?xiě)證照名稱?。?！`);
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('改文件已上傳，請(qǐng)重新選擇文件上傳?。?！');
that.$refs[content.data].clearFiles();
return false;
}
}
// 將文件加入到待傳輸?shù)奈募斜?
that.totalFileList.push(content.file)
let fileNameData = {
cardName: content.data,
fileName: content.file.name
}
// totalFileNameList 存儲(chǔ)文件和表格內(nèi)容的關(guān)聯(lián)關(guān)系，這里只關(guān)聯(lián)了證照名稱
that.totalFileNameList.push(fileNameData)
},
// 執(zhí)行上傳操作將文件和表格信息一起發(fā)送到后臺(tái)
doFileUpload(){
let that = this;
if(that.totalFileList.length === 0){
that.$message.warning("請(qǐng)上傳文件！??！");
return;
}
// 上傳文件需要用FormData，processData和contentType 兩個(gè)參數(shù)必須設(shè)置，否則上傳不成功
const params = new FormData();
// 為上傳的每個(gè)文件命名，方便后臺(tái)獲取時(shí)與表格數(shù)據(jù)關(guān)聯(lián)
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, //用于對(duì)data參數(shù)進(jìn)行序列化處理 這里必須false
contentType: false, //必須
data:params,
success:function(res){
that.$message.warning('上傳成功');
}
});
}
},
created: function(){
}
})
后臺(tái)接收代碼
@Controller
@RequestMapping("/testupload")
public class RegisterController {
// 附件從 request中獲取
@RequestMapping("/fileUpload")
@ResponseBody
public ServerResponse fileupload(HttpServletRequest request,String fileNameList){
try{
if(fileNameList == null){
throw new Exception("請(qǐng)選擇文件后上傳?。?！");
}
// 1. 上傳的位置
String path = "E:\\uploadfile";
//判斷該路徑是否存在
File file = new File(path);
if (!file.exists()) {
file.mkdirs();
}
// 處理以字符串形式上傳的關(guān)聯(lián)數(shù)據(jù)信息
JSONArray jsonArray = JSON.parseArray(fileNameList);
// 遍歷關(guān)聯(lián)列表
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();
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue如何修改data中數(shù)據(jù)問(wèn)題
這篇文章主要介紹了vue如何修改data中數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式代碼
這篇文章主要給大家介紹了關(guān)于vue導(dǎo)出excel的兩種實(shí)現(xiàn)方式,在項(xiàng)目中我們可能會(huì)碰到導(dǎo)出Excel文件的需求,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于如何以拖拽方式生成Vue用戶界面的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法
在Vue?3中,因?yàn)檫^(guò)濾器(filter)已經(jīng)被廢棄,取而代之的是全局方法(global?method),本文給大家介紹Vue?3?使用moment設(shè)置顯示時(shí)間格式的問(wèn)題及解決方法,感興趣的朋友一起看看吧2023-12-12
element-plus 如何設(shè)置 el-date-picker 彈出框位置
el-date-picker 組件會(huì)自動(dòng)根據(jù)空間范圍進(jìn)行選擇比較好的彈出位置,但特定情況下,它自動(dòng)計(jì)算出的彈出位置并不符合我們的實(shí)際需求,故需要我們手動(dòng)設(shè)置,這篇文章主要介紹了element-plus 如何設(shè)置 el-date-picker 彈出框位置,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析
這篇文章主要為大家介紹了Vue中render函數(shù)調(diào)用時(shí)機(jī)與執(zhí)行細(xì)節(jié)源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue component 中引入less文件報(bào)錯(cuò) Module build failed
這篇文章主要介紹了vue component 中引入less文件報(bào)錯(cuò) Module build failed的解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
Vue前端開(kāi)發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計(jì)器自定義組件使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12