如何将Base64图片字符串转换为Blob并通过表单发送至后端

你的代码逻辑本身没问题，但大概率是没处理Base64字符串的前缀（比如 data:image/png;base64,）导致转换失败。以下是修正后的完整方案：

1. 修正Base64转Blob的函数 #

先移除Base64字符串里的前缀，再进行转换：

const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  // 移除Base64前缀（如果存在）
  const base64String = b64Data.replace(/^data:[^;]+;base64,/, '');
  const byteCharacters = atob(base64String);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: contentType });
};

2. 构建FormData并发送到后端 #

转换得到Blob后，把它加入FormData，再用fetch或者XMLHttpRequest发送：

示例1：使用fetch发送 #

// 假设你有一个Base64图片字符串和对应的MIME类型
const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
const contentType = 'image/png';

// 转成Blob
const imageBlob = b64toBlob(base64Image, contentType);

// 构建FormData
const formData = new FormData();
// 第一个参数是后端接收的字段名，比如"avatar"
formData.append('avatar', imageBlob, 'avatar.png');

// 发送请求
fetch('/api/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

示例2：使用XMLHttpRequest发送 #

const base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==';
const contentType = 'image/png';
const imageBlob = b64toBlob(base64Image, contentType);

const formData = new FormData();
formData.append('avatar', imageBlob, 'avatar.png');

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功:', JSON.parse(xhr.responseText));
  } else {
    console.error('上传失败:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('网络错误');
};
xhr.send(formData);

关键注意点 #

• 后端字段名要匹配：formData.append的第一个参数要和后端接口接收的字段名一致，比如后端用request.files['avatar']接收，这里就填'avatar'。
• MIME类型要正确：转换时传入的contentType要和图片实际类型一致，比如JPG是image/jpeg，PNG是image/png。
• 文件名可选：formData.append的第三个参数是文件名，后端可以通过这个获取文件名，不填的话浏览器会自动生成一个。

内容的提问来源于stack exchange，提问作者saeed latifi