vue 使用 formData 调用接口

背景：一般情况下，数据传输 Content-Type 使用 application/json

原传参格式：

[{
	"name": "桌子",
	"quotas": [
		{
			"money": 1,
			"unit": "元"
		}
	]
}]

修改：上传文件时，Content-Type 需要 改成 formData

vue 代码

• headers：添加 Content-Type，值为 formData

let config = {
 headers: {
    "Content-Type": "multipart/form-data",
  },
};

• formData：新建 formData

let formData = new FormData();

• 传参为字符串：formData.append(“name”,“value”)

formData.append("name", this.form.name);

• 传参为数组：formData.append(arrayName[${i}].money,value);

formData.append(`quotas[${i}].money`, item.money);

 
参考代码

 saveSubmit() {
      if (this.form.quotaDetailList.length == 0) {
        this.$message.error("请添加指标明细");
        return;
      }
      let formData = new FormData(); // 创建form对象

      //   formData添加多个文件至annexList
      this.fileList.forEach((item) => {
        formData.append("annexList", item.raw);
      });

      formData.append("name", this.form.name);
      //   fordata添加数组类型quotaDetailList参数
      this.form.quotaDetailList.forEach((item, i) => {
        formData.append(`quotas[${i}].money`, item.money);
        formData.append(`quotas[${i}].unit`, item.unit);
      });

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      //   判断新增还是编辑
      if (this.$parent.dialogTitle == "新增") {
        this.$axios
          .post(`/`, formData, config)
          .then((res) => {
            this.$notify({
              title: "提示",
              message: "添加成功",
              type: "success",
            });
            this.$parent.dialogVisible = false;
            this.$parent.search(1);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        formData.append("id", this.$parent.dialogId);
        this.$axios
          .put(`/`, formData, config)
          .then((res) => {
            this.$notify({
              title: "提示",
              message: "编辑成功",
              type: "success",
            });
            this.$parent.dialogVisible = false;
            this.$parent.search(1);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },