The FormData interface provides a way to construct key/value pairs that represent FormData and can easily send the data through the xmlhttprequest.send () method, both of which are fairly straightforward. If the sent encoding type is set to “multipart/form-data”, it will use the same format as the form. See the FormData. Append

Append /set needs to note:

The first two parameters correspond to key and value respectively, but value transmission is required. Only String, Blob, and File values are supported. If the values are not of the three types, String parameters are forcibly converted. When we encounter json.stringify in everyday use, we will do a little bit of json.stringify in some cases does not achieve the desired result. For example, a File or Blob File json. stringify will then become {}, see json.stringify

The source data:

  1. The original version did not take into account complex type issues directlyappend, which causes the object to be converted directly to[object Object]The parameter verification fails
data: { ... defaultQuery, ... query },transformRequest: [
    _data= > {
      const data = new window.FormData()
      for (const key in _data) {
        let value = _data[key]
        data.append(key, value)
      }
      return data
    }
  ]

Copy the code

Results:

  1. Modified version to allow for complex types, but rightJSON.stringifyDon’t understand, willBlob 和 FileThe file isJSON.stringify 了
data: { ... defaultQuery, ... query },transformRequest: [
    _data= > {
      const data = new window.FormData()
      for (const key in _data) {
        let value = _data[key]
        if (_data[key] instanceof Object) {
          value = JSON.stringify(_data[key])
        }
        data.append(key, value)
      }
      return data
    }
  ]

Copy the code

Results:

  1. Improved version

  const specialFileType = ['Blob'.'File']

  // ...
  data: {... defaultQuery, ... query },transformRequest: [
    _data= > {
      const data = new window.FormData()
      for (const key in _data) {
        let value = _data[key]
        if (_data[key] instanceof Object && !specialFileType.includes(_data[key].constructor.name)) {
          value = JSON.stringify(_data[key])
        }
        data.append(key, value)
      }
      return data
    }
  ]

Copy the code

Results:

Conclusion:

Json. stringify has some special cases, such as function being converted to undefined. Json.stringify () : Boolean, number, and string wraparound objects are automatically converted to their original values during serialization, but this is generally sufficient. In JavaScript, we call [1, 2,3] an Array, and we can create it by new Array(1,2,3), or we can create it by literals, but in Java we might not call it that, and we might not create it this way, but it’s actually a thing, Different language cannot be directly interaction, unless there is a difference between middleware to flatten out, and JSON is the middleware, language-independent text format makes it possible to become a standard between language, everyone no matter what language, but try to use this format, data transmission, each language has a corresponding formatting and parsing methods.