vue+el-upload实现多文件动态上传

<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>

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();    }}