这里记录一下需要提交对象、对象数组、附件文件的数据给后端一直报错参数校验异常的问题
普通的提交对象数组给后端很容易,带附件的传值给后端也容易实现,但是需要提交对象、对象数组、附件文件的数据给后端就有点难住了。废话不多说,直接上代码
这个是对象数组和文件放在一起传给后端,主要就是这一段代码
const fileData = new FormData()
//这个this.formData.items是对象数组
this.formData.items.forEach((item, index) => {
for (const key in item) {
if (Object.hasOwnProperty.call(item, key)) {
const value = item[key]
fileData.append(`items[${index}].${key}`, value)
}
}
})
一起来看看关键代码是怎么一起提交对象、对象数组、附件文件的数据给后端的吧
1. 首先是封装的接口,contracts_add就是咱们要用的接口
export function contracts_add(data, params) {
return request({
url: '/Api/contracts/add',
method: 'post',
data,
params
})
}
2. 页面导入这个接口
3. 在提交的这个方法里面写
submit(){
//这个是fileData 是存的文件以及对象数组
const fileData = new FormData()
this.$refs.upload.fileList.forEach((item) => {
console.log('item.raw', item.raw)
if (item.raw && item.raw.lastModified) {
fileData.append('file', item.raw)
}
})
}
const obj = JSON.parse(JSON.stringify(this.formData))
//这个给fileData 进行append添加进对象数组
this.formData.items.forEach((item, index) => {
for (const key in item) {
if (Object.hasOwnProperty.call(item, key)) {
const value = item[key]
fileData.append(`items[${index}].${key}`, value)
}
}
})
//然后调用接口,传fileData以及obj
contracts_add(fileData, obj)
············后面就省略了