vue 文件及描述信息一起上传_vue文件上传与form表单数据一起提交处理方法

简单来说就是用Formdata方法，将表单数据和文件流一并处理，请求后台

示例如下：

表单：

点击上传文件

上传文件:{{modifyItem.exam.name}}

提交方法:

modifyOk(){

this.$refs.modifyItem.validate(valid => {

var formdata = new FormData();

formdata.append("exam",this.modifyItem.exam)

formdata.append("taskname",this.modifyItem.tasks)

formdata.append("taskid",this.selected[0].taskid)

this.$http.post(this.path+'/storeadmin/task/updateTaskOverWrite.action',formdata,{

headers: {

"Content-Type": "multipart/form-data"

}

}).then(res=>{

if(res.data.status == 1){

this.$Message.success({

content: '修改成功',

})

this.modifyItem.exam='';

}else{

this.$Message.error({

content: res.data.errorMsg,

})

}

})

})

}

定义变量：

modifyItem: {

taskid: "",

taskname: "",

exam: null,

}

java后台接收：

若exam可为空则方法参数无需@RequestParam MultipartFile exam，直接从 HttpServletRequest request中获取，但是要进行以下判断

boolean isMultipart = ServletFileUpload.isMultipartContent(request);

if (isMultipart){

MultipartHttpServletRequest multipartRequest = WebUtils.getNativeRequest(request, MultipartHttpServletRequest.class);

MultipartFile exam = multipartRequest.getFile("exam");

}