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);
          });
      }
    },

猜你喜欢

转载自blog.csdn.net/weixin_42555971/article/details/129010481