需求:前台页面上传入一个文件和一段文字,传给后端。
new Vue({
el: '#app',
data: {
formJson: {"widgetList":
[
{"type":"file-upload","icon":"file-upload-field","formItemFlag":true,"options":{
"name":"fileexcel","label":"上传excel","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"required":false,"requiredHint":"","customRule":"","customRuleHint":"","uploadURL":"","uploadTip":"","withCredentials":false,"multipleSelect":false,"showFileList":true,"limit":3,"fileMaxSize":5,"fileTypes":["doc","docx","xls","xlsx"],"customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onBeforeUpload":"","onUploadSuccess":"","onUploadError":"","onValidate":""},"id":"fileexcel"}
,{"type":"textarea","icon":"textarea-field","formItemFlag":true,"options":{
"name":"DingText","label":"钉钉文本","labelAlign":"label-center-align","rows":20,"defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"required":false,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"DingText"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-center-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
formData: {},
optionData: {}
},
methods: {
submitForm: function() {
this.$refs.vFormRef.getFormData().then( function(formData) {
alert( JSON.stringify(formData))
axios({
headers:{
'Content-Type':'multipart/form-data;boundary=--------------------------383701905023712046165926'
},
method: 'post',
url:"/DingTalk",
data: formData
})
}).catch( function(error) {
// Form Validation Failed
alert(error)
})
}
}
});
@RequestMapping("/DingTalk")
public void getList(HttpServletResponse response,@RequestParam(value = "fileexcel",required = false) MultipartFile file
,@RequestParam(value = "DingText",required = false) String DingText) throws IOException {
}
·
java.lang.NullPointerException: null
如果要同时传文件+参数,需要包装成formdata
后台能收到文件和参数
let formData = new FormData()
FormData.append()
你看看 排查一下 formData 是什么 是表单格式么 还是对象格式
如果是对象格式要改成 new FormData 然后排查一下 f12 network 数据有没有传输给后台
formData.fileExcel[0] => formData.fileexcel[0].raw
axios调用之前处理一下 form 对象
let formDataFile = new FormData()
formDataFile.append('DingText', formData.DingText);
formDataFile.append('fileExcel', formData.fileexcel[0].raw);
// 传递data 改成 formDataFile
data: formDataFile