之前需要使用FormData去上传数据,突然发现当上传一个数组或对象的时候就会出现:
这样的情况。
代码如下:
const submitDataKeys = Object.keys(submitData.value)
submitDataKeys.forEach(key => {
if (submitData.value[key]) formData.append(key, submitData.value[key])
})
查找相关的资料:segmentfault.com/a/119000004…
找到了解决的方法,但不太通用。
遂封装了一个工具函数去处理相关的问题,代码如下:
const formDateProc = (formData, data, keyArray = []) => {
if (!formData) return
/* 当data是数组的时候,data中的数据需要使用'[]'去索引,故先对数组数据做处理 */
const keys = data instanceof Array ? Object.keys(data).map(v => parseInt(v, 10)) : Object.keys(data)
/* 对数组及对象的索引方式做处理 */
const keyProc = key => (typeof key === 'number' ? `[${key}]` : `.${key}`)
keys.forEach(key => {
/* 递归处理data中的Array及Object的情况 */
if (data[key] instanceof Object) formDateProc(formData, data[key], [...keyArray, key])
else if (data[key]) {
/* 当keyArray中没值的时候直接使用key作为formData的key反之需要使用keySerialized作为key */
const keySerialized = keyArray.reduce((pre, cur, index) => `${pre}${index ? `${keyProc(cur)}` : cur}`, '')
if (!keySerialized) formData.append(key, data[key])
else formData.append(`${keySerialized}${keyProc(key)}`, data[key])
}
})
}
const formData = new FormData()
const submitDataCopy = JSON.parse(JSON.stringify(submitData.value))
formDateProc(formData, submitDataCopy)
问题解决: