springboot+elementUI 多文件上传(带表单参数)

代码

下面展示一些 内联代码片。

html

<div>
        <el-button @click="dialogVisible = true">新增</el-button>
        <el-button @click="updateFile">修改</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @closed="diologClosed">

            <el-upload class="upload-demo" ref="upload" :limit="3" :multiple="true"
                accept=".doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .jpg, .png" action :on-remove="handleUploadRemove"
                :on-change="handleUploadChange" :on-exceed="handleUploadExceed" :file-list="fileList"
                :http-request="uploadFile" :auto-upload="false">
                <el-button slot="trigger" type="primary">选取文件</el-button>
                <div slot="tip" class="el-upload__tip">上传文件不超过10MB</div>
            </el-upload>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>

js

data(){
	isInsert:false //是否新增操作
    files: [],//新增文件
	fileList: [],//文件列表
	removeList: [],//删除的文件列表
	dialogForm:{
		name:"测试"
	}
}
updateFile() {
    this.isInsert = false;
    this.dialogVisible = true;
    this.fileList = [{
        name: "测试文件",
        url: "http://localhost:8089/test.doc",
        filepath:''//后台文件储存路径 方便删除
    }]
},
uploadFile(file) {
    this.files.push(file.file);
},
handleUploadChange(file,fileList) {
    // 当多余一个的时候替换文件
    // if (fileList.length > 1) {
    //   fileList.splice(0, 1);
    // }
    //获取上传文件大小
    let imgSize = Number(file.size / 1024 / 1024);
    if (imgSize > 10) {
        this.$message.warning("文件过大！")
        fileList = fileList.filter(e=>{
            return e.uid != file.uid
        })
        this.fileList = JSON.parse(JSON.stringify(fileList));
        return;
    } 
},
handleUploadExceed(files, fileList) {
   this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
        files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    );
},
handleUploadRemove(file) {
   //判断是否服务器文件删除 this.fileList中的status 为success 新上传的为ready
   if (file.status == "success") {
        this.removeList.push(file)
      }
    console.log("this.removeList", this.removeList)
},
handleSubmit() {
    this.$refs.upload.submit();
    var formDate = new FormData();
    this.files.forEach(element => {
        formDate.append("files", element);
    });
    let config = {
        headers: {
            "Content-Type": "multipart/form-data"
        }
    };
    if (this.isInsert) {
    	//携带表单参数
        formDate.append("form", JSON.stringify(this.dialogForm));
        this.$axios
            .post("http://localhost:8089/insertFileInfo", formDate, config)
            .then(res => {
                 this.dialogVisible = false;
            })
            .catch(err => {
                console.log(err);
            });
    } else {
    	//携带表单参数
        formDate.append("form", JSON.stringify(this.dialogForm));
        formDate.append("removeList", JSON.stringify(this.removeList));
        this.$axios
            .post("http://localhost:8089/updateFileInfo", formDate, config)
            .then(res => {
                 this.dialogVisible = false;
            })
            .catch(err => {
                console.log(err);
            });
    }
},
 diologClosed() {
    this.files = [];
    this.fileList = [];
    this.removeList = [];
    this.isInsert = true;
    // this.$data.dialogForm = this.$options.data().dialogForm;
    // this.$nextTick(() => {
    //     this.$refs["dialogForm"].clearValidate();
    // });
}

后台

@RequestMapping(value = "/insertFileInfo", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public int insertFileInfo(HttpServletRequest request, MultipartFile[] files, String form) {
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) (request);
        MultiValueMap<String, MultipartFile> map = multipartHttpServletRequest.getMultiFileMap();
        //判断是否有文件上传
        if (!map.isEmpty()) {
            System.out.println("上传操作");
        }

        return 1;
    }
 @RequestMapping(value = "/updateFileInfo", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public int updateFileInfo(HttpServletRequest request, String form,String removeList) {
        MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) (request);
        MultiValueMap<String, MultipartFile> map = multipartHttpServletRequest.getMultiFileMap();
        User user = JSON.parseObject(form,User.class);
        List<Map> removeMaps = JSON.parseArray(removeList, Map.class);
        //判断是否有文件移除
        if (!removeMaps.isEmpty()) {
            System.out.println("移除本地文件");
        }
        //判断是否有文件上传
        if (!map.isEmpty()) {
            System.out.println("上传操作");
        }

        return 1;
    }

图