js普通对象转换成formData对象，并查看转换后的formData内容

_s七月

已于 2024-07-16 11:05:52 修改

阅读量463

点赞数 16

分类专栏： Vue3 文章标签： javascript 前端开发语言 vue

于 2024-07-16 10:52:35 首次发布

本文链接：https://blog.csdn.net/qq_59572992/article/details/140457757

版权

Vue3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

因为接口的原因，需要提交 multipart/form-data 格式的数据，需要将js的普通对象转换成formData对象用于提交。

1. 对象中嵌套复杂类型

// 定义递归函数处理需要转换的对象
export const objectToFormData = (obj, formData) => {
  formData = formData || new FormData()

  for (let key in obj) {
       // hasOwnProperty 是 JavaScript 中的一个内置方法，用于判断一个对象是否拥有某个指定的属性，而不是继承自原型链的属性
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      let value = obj[key]

      if (value instanceof Array) {
        value.forEach((item) => {
          objectToFormData(item, formData)
        })
      } else if (value instanceof Object) {
        objectToFormData(value, formData)
      } else {
        formData.append(key, value)
      }
    }
  }
  return formData
}

在需要转换formData对象的组件内引入并调用

import { objectToFormData } from '@/utils/tool.js'

const obj = ref({
  name: 'John Doe',
  profile: {
    age: 30,
    city: 'New York'
  },
  list: [
    {
      name: 'zs',
      age: '18'
    },
    {
      name: 'ls',
      age: '18'
    }
  ]
}) // 假设对象中有嵌套的对象和数组

// 调用函数处理对象
obj.value = objectToFormData(obj.value)

可以通过以下方法查看转换后的formData对象内容

for (let [key, value] of obj.value.entries()) {
    console.log(key, value)
  }

2. 对象中无嵌套复杂类型

const obj = ref({
  name: 'John',
  age: '23',
  avatar: '112222222222'
})

const formData = new FormData()

 for (let key in obj.value) {
    formData.append(key, obj.value[key])
 }
// 如果对象中没有复杂类型数据只需要这么写就足够了，不过上述递归也会处理这种形式