FormData传数组对象的方法

2,070 阅读1分钟

之前需要使用FormData去上传数据,突然发现当上传一个数组或对象的时候就会出现:

image.png
这样的情况。
代码如下:

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)

问题解决:

image.png