Understanding and Using FormData for File Uploads in Frontend Development

During routine development the team used an internal request wrapper that sent JSON payloads with Content-Type: application/json . The backend required multipart/form-data , prompting a review of request headers and the need to switch to FormData for proper file handling.

The article briefly reviews RESTful principles, focusing on HTTP verbs such as GET and POST . It highlights that GET parameters are limited by URL length, while POST requests carry data in the request body, making them suitable for complex payloads like FormData.

FormData is a built‑in browser API designed to represent form fields as key/value pairs, supporting string , Blob , and File values. Unlike JSON, FormData can transmit binary files directly without manual encoding.

Typical usage involves creating a FormData instance and appending fields. The append method adds a new entry, preserving existing values, whereas set overwrites any existing entry with the same key. The choice depends on whether multiple values for a key are needed.

const specialFileType = ['Blob', 'File'];
function formatData(_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;
}

When sending a request, browsers automatically set Content-Type: multipart/form-data (including a boundary string) if the payload is a FormData object, even if the developer does not manually specify the header.

cosnt View = () => {
  const [fileA, setFileA] = useState(null);
  const [fileB, setFileB] = useState(null);
  const handleClick = () => {
    console.log('fileA:', fileA);
    console.log('fileB:', fileB);
    const p = {
      a: { a1: 11, a2: 22 },
      b: [1, 2, 3],
      c: 123,
      d: fileA[0],
      e: fileB[0],
    };
    const data = formatData(p);
    axios({
      method: 'POST',
      url: '/aa',
      data,
      // headers: { 'content-type': 'multipart/formdata' },
    });
  };
  return
发送请求
{ const v = a.target.files; setFileA(v); }} />
{ const v = a.target.files; setFileB(v); }} />
;
};

Each part of the multipart body is separated by a boundary like ------WebKitFormBoundary... and includes headers such as Content-Disposition (with name and optional filename ) and Content-Type . Proper coordination of Content-Type between client and server is essential for reliable data exchange.

In summary, FormData satisfies most everyday needs for sending form data, especially when files are involved. Developers should choose the appropriate method ( append vs set ) based on the required semantics and ensure that request headers align with server expectations.