Vue项目里实现json对象转formData数据

平常调用后端接口传参都是json对象,当提交表单遇到有附件需要传递时,通常是把附件上传单独做个接口,也有遇到后端让提交接口一并把附件传递到后端,这种情况需要把参数转成formData的数据,需要用到new FormData()。json对象转formData,一个一个的赋值代码会非常冗余,并且遇到复杂的数据结构,还需要一层一层的往下循环赋值。因此写了一个demo解决当前问题以供参考,写的不好的地方欢迎指正。

复制代码
<template>
  <div>
    测试页面
    <el-button type="primary" size="small" @click="changeHandle"
      >json对象转formData</el-button
    >
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  methods: {
    changeHandle() {
      let obj = {
        name: "yongqiang.chen",
        age: 30,
        likes: ["足球", "篮球", "乒乓球"],
        work: {
          address: "软件园C5",
          floor: 7,
          isWork: true,
          computer: {
            color: "black",
            num: 8,
            size: 1024,
          },
        },
        deepArray: [
          [
            { name: "张三", age: 25, likes: ["七星彩", "大乐透", "双色球"] },
            { name: "李四", age: 26, likes: ["轿车", "摩托车", "自行车"] },
          ],
          [
            { title: "隐形的翅膀", singer: "张韶涵" },
            { title: "2002年的第一场雪", singer: "刀郎" },
          ],
        ],
      };
      let formDatas = new FormData();
      this.makeFormData(obj, formDatas);
      for (let [name, value] of formDatas) {
        console.log(`${name} = ${value}`);
      }
    },
    makeFormData(obj, form_data) {
      var data = [];
      if (obj instanceof File) {
        data.push({ key: "", value: obj });
      } else if (obj instanceof Array) {
        for (var j = 0, len = obj.length; j < len; j++) {
          var arr = this.makeFormData(obj[j]);
          for (var k = 0, l = arr.length; k < l; k++) {
            var key = !!form_data ? j + arr[k].key : "[" + j + "]" + arr[k].key;
            data.push({ key: key, value: arr[k].value });
          }
        }
      } else if (typeof obj == "object") {
        for (var j in obj) {
          var arr = this.makeFormData(obj[j]);
          for (var k = 0, l = arr.length; k < l; k++) {
            var key = !!form_data ? j + arr[k].key : "." + j + "" + arr[k].key;
            data.push({ key: key, value: arr[k].value });
          }
        }
      } else {
        data.push({ key: "", value: obj });
      }
      if (!!form_data) {
        // 封装
        for (var i = 0, len = data.length; i < len; i++) {
          form_data.append(data[i].key, data[i].value);
        }
        return form_data;
      } else {
        return data;
      }
    },
  },
};
</script>

<style>
</style>
相关推荐
gongzemin5 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox18 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952722 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据40 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox