ReactJs中如何移除Base64字符串的data:image/png;base64前缀并通过Axios POST上传至API服务器

嘿，这事儿不难搞定！我来一步步给你说清楚怎么修改你的代码，实现移除Base64前缀并成功上传到API服务器。

1. 移除Base64前缀的两种简单方法 #

首先，我们需要把data:image/png;base64,（或jpeg版本）这类前缀去掉，有两种实用方式：

方法一：正则替换 #

利用正则精准匹配开头的前缀，直接替换为空字符串，兼容png和jpeg两种格式：

const base64WithoutPrefix = base64String.replace(/^data:image\/(png|jpeg);base64,/, '');

方法二：分割字符串 #

如果前缀格式固定，用split分割后取后半段更简洁：

const base64WithoutPrefix = base64String.split(',')[1];

只要前缀是data:...;base64,的格式，这种方式就百分百有效。

2. 修改你的getCroppedImg函数 #

你可以直接在函数内部处理掉前缀，让返回结果直接是纯Base64字符串：

getCroppedImg(image, crop) { 
    const canvas = document.createElement('canvas'); 
    const scaleX = image.naturalWidth / image.width; 
    const scaleY = image.naturalHeight / image.height; 
    canvas.width = crop.width; 
    canvas.height = crop.height; 
    const ctx = canvas.getContext('2d'); 
    ctx.imageSmoothingQuality = 'high'; 
    ctx.drawImage( 
        image, 
        crop.x * scaleX, 
        crop.y * scaleY, 
        crop.width * scaleX, 
        crop.height * scaleY, 
        0, 
        0, 
        crop.width, 
        crop.height 
    ); 
    return new Promise((resolve, reject) => { 
        canvas.toBlob(blob => { 
            const base64 = canvas.toDataURL('image/jpeg');
            // 移除前缀，这里用split方法更简洁
            const pureBase64 = base64.split(',')[1];
            resolve(pureBase64); 
        }, 'image/jpeg'); 
    }); 
}

当然，你也可以在调用函数后再处理前缀，比如：

// 调用时处理前缀
getCroppedImg(image, crop)
  .then(base64WithPrefix => {
    const pureBase64 = base64WithPrefix.split(',')[1];
    // 接下来执行上传操作
    uploadToAPI(pureBase64);
  })
  .catch(err => console.error('裁剪失败:', err));

3. 通过Axios上传处理后的内容 #

接下来就是把处理好的内容传给API服务器，这里分两种常见场景：

场景一：API接受纯Base64字符串 #

如果服务器接口直接支持JSON格式的纯Base64字符串，你可以这样写：

import axios from 'axios';

const uploadToAPI = async (pureBase64) => {
  try {
    const response = await axios.post('/your-api-endpoint', {
      image: pureBase64, // 把纯Base64放在请求体中
      // 其他需要的参数...
    }, {
      headers: {
        'Content-Type': 'application/json',
      }
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

场景二：API接受FormData格式（更推荐） #

其实直接上传Blob比Base64更高效——Base64会比原始Blob体积大30%左右。你可以修改函数直接返回Blob，再通过FormData上传：

// 修改后的getCroppedImg，返回Blob对象
getCroppedImg(image, crop) { 
    const canvas = document.createElement('canvas'); 
    const scaleX = image.naturalWidth / image.width; 
    const scaleY = image.naturalHeight / image.height; 
    canvas.width = crop.width; 
    canvas.height = crop.height; 
    const ctx = canvas.getContext('2d'); 
    ctx.imageSmoothingQuality = 'high'; 
    ctx.drawImage( 
        image, 
        crop.x * scaleX, 
        crop.y * scaleY, 
        crop.width * scaleX, 
        crop.height * scaleY, 
        0, 
        0, 
        crop.width, 
        crop.height 
    ); 
    return new Promise((resolve, reject) => { 
        canvas.toBlob(blob => {
            blob ? resolve(blob) : reject(new Error('无法生成图片Blob'));
        }, 'image/jpeg'); 
    }); 
}

// 基于FormData的上传函数
const uploadToAPI = async (imageBlob) => {
  try {
    const formData = new FormData();
    formData.append('image', imageBlob, 'cropped-image.jpg'); // 第三个参数是上传后的文件名

    const response = await axios.post('/your-api-endpoint', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    });
    console.log('上传成功:', response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};

// 调用方式
getCroppedImg(image, crop)
  .then(blob => uploadToAPI(blob))
  .catch(err => console.error('裁剪或上传失败:', err));

这种方式不仅更高效，也是大多数文件上传接口的标准格式。

内容的提问来源于stack exchange，提问作者Arun Raj