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

• 代码
• • html
  • js
  • 后台
  • 图

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

        新增
        修改
        

            
                选取文件
                
上传文件不超过10MB
            

            
                取 消
                确 定
            
        
    

data(){
    files: [],//新增文件
	fileList: [],//文件列表
	removeList: [],//删除的文件列表
	fileIsChange: "",
}
updateFile() {
    this.isInsert = false;
    this.dialogVisible = true;
    this.fileList = [{
        return: true, //回显文件
        name: "测试文件",
        url: "http://localhost:8089/test.doc"
        filepath:''//后台文件储存路径 方便删除
    }]
},
uploadFile(file) {
    this.files.push(file.file);
},
handleUploadChange(file,fileList) {
    //获取上传文件大小
    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) {
    console.log("remove file....", file)
    //是否为回显文件
    if (!file.return) {
        return
    }
    this.fileList.forEach(e => {
        if (file.name == e.name) {
            this.removeList.push(file);
        }
    })
    console.log("this.removeList", this.removeList)
    this.fileIsChange = true;
},
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);
            });
    }
},

@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 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 map = multipartHttpServletRequest.getMultiFileMap();
        User user = JSON.parseObject(form,User.class);
        List