使用FormData格式在先後端傳遞數據

爲何必定要使用formdata格式……很大緣由是由於當時我犯蠢……

 

前端確定是JS了，具體不寫了，使用Postman測試，後端語言是Java，框架Spring Boot，使用IntelliJ IDEA

 

1、基本類型

例:

能夠看到form-data只能傳遞鍵值對形式。

簡單類型直接傳遞就能夠了。

 

 

2、對象類型

Java代碼：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

class User {
    String name;
    int age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

@RestController
@RequestMapping(value={"/example"})
public class Example {

    @RequestMapping(value={"/user"})
    public void objectType(User user) {
        return;
    }

}

前端數據：

name: 'xiaoming'
age: 18

 

3、複雜狀況

行吧……直接說我遇到的問題，接收一個對象和一個對象數組。

同時接收兩個參數時不可能的（至少我沒發現），首先要建一個對象包含這兩個參數。

上代碼…

public class CLS1 {
    int id;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
}
/***********************/
public class CLS2 {
    String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
/***********************/
import java.util.ArrayList;

public class Wrapper {
    CLS1 cls1;
    ArrayList<CLS2> cls2List;
    public CLS1 getCls1() {
        return cls1;
    }
    public void setCls1(CLS1 cls1) {
        this.cls1 = cls1;
    }
    public ArrayList<CLS2> getCls2List() {
        return cls2List;
    }
    public void setCls2List(ArrayList<CLS2> cls2List) {
        this.cls2List = cls2List;
    }
}
/***********************/
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;

@RestController
@RequestMapping(value={"/example"})
public class Example {
    @RequestMapping(value={"/complex"})
    public void complexType(Wrapper wrapper) {
        CLS1 cls1 = wrapper.getCls1();
        ArrayList<CLS2> cls2s = wrapper.getCls2List();
    }

}

重點在於前端的數據格式：

cls1.id: 233
cls2List[0].name: 'hello'
cls2List[1].name: 'world'

 

4、前端格式化工具類

前端手打確定很麻煩，寫了一個對象轉formdata鍵值對的函數，本身試了下沒什麼問題，有沒有bug就不知道了……

function objToFd(obj, form, name) {
  const fd = form || new FormData()

  if (typeof obj !== 'object' || obj instanceof File) {
    fd.append(name, obj)
    return fd
  }

  const keyName = name ? name + '.' : ''

  for (const prop in obj) {
    // 判斷是本身的屬性 且不爲空
    if (prop != null && obj.hasOwnProperty(prop) && obj[prop] != null && obj[prop] !== '') {
      const val = obj[prop]
      if (val instanceof Array) {
        // 若是是數組
        val.map((item, index) => {
          objToFd(item, fd, keyName + prop + '[' + index + ']')
        })
      } else {
        objToFd(val, fd, keyName + prop)
      }
    }
  }

  return fd
}

 

測試：

let data = {
    k1: "k1-v",
    k2: 345,
    k3: {
        k31: [1, 2, { k313: 'k313-v' }],
        k32: {
            k321: 'k321-v',
            k322: true,
            k323: ['con', 'ff']
        }
    },
    k4: '',
    k5: undefined,
    k6: ['m', 'd', 'z', 'z']
}

const fd = objToFd(data);
for (var pair of fd.entries()) {
  console.log(pair[0] + ': ' + pair[1])
}

/*******            輸出          *******/
k1: k1-v
k2: 345
k3.k31[0]: 1
k3.k31[1]: 2
k3.k31[2].k313: k313-v
k3.k32.k321: k321-v
k3.k32.k322: true
k3.k32.k323[0]: con
k3.k32.k323[1]: ff
k6[0]: m
k6[1]: d
k6[2]: z
k6[3]: z

 

 

以上全是本身在網上查資料&瞎試出來了，不保證準確性。