使用fetch配合FormData上传图片时服务端无法获取数据如何解决

• 你直接将Base64格式的图片字符串作为参数传入uploadImage函数，普通字符串append到FormData后，服务端会按照普通文本字段解析，而不是文件字段
• Postman上传时你选择的是本地文件，传输的是二进制文件流，和你前端传字符串的逻辑完全不一致，所以Postman能成功而前端失败

你需要先将Base64格式的图片转换为二进制Blob对象，再放入FormData中传输，同时不要手动设置Content-Type请求头，具体实现如下：

1. 先实现Base64转Blob的工具函数

function base64ToBlob(base64Str) {
  // 拆分Base64头和编码内容
  const arr = base64Str.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  // 解码Base64内容
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

2. 修改上传逻辑

function uploadImage(base64Image) {
  // 先把Base64转成Blob对象
  const imageBlob = base64ToBlob(base64Image);
  const data = new FormData();
  // 第三个参数指定文件名，符合文件上传的标准格式，和Postman上传行为一致
  data.append("upload", imageBlob, "upload.jpg");
  fetch('/accounts/upload-image', {
    method: 'POST',
    body: data,
  })
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.log(error));
}

特别注意：不要在fetch的请求配置里手动加Content-Type: multipart/form-data请求头，浏览器会自动根据FormData内容生成带boundary分隔符的正确请求头，手动设置会覆盖掉boundary参数，导致服务端无法正常解析表单数据。

内容的提问来源于stack exchange，提问作者Sara Ree