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>
相关推荐
new出一个对象8 分钟前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥1 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
天天进步20154 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html