如何在React中用Axios构造multipart/mixed类型的POST请求

要在React中用Axios发送multipart/mixed类型的POST请求，你需要手动构建请求体（Axios默认针对multipart/form-data做封装，不直接支持multipart/mixed），核心是拼接带边界标识的多部分内容，再转为Blob格式发送。

具体实现步骤 #

1. 生成边界字符串
   边界字符串用来分隔请求体中的不同部分，建议用随机字符串避免冲突：

   const boundaryString = `----MultipartBoundary${Date.now().toString(16)}`;
   

2. 构建各请求部分
   分别处理XML片段和文件内容，每个部分需包含对应HTTP头信息，用边界字符串分隔：

   • XML部分：设置Content-Type为application/xml
   • 文件部分：设置Content-Type（根据实际文件类型调整，如application/octet-stream或具体MIME类型）和可选的Content-Disposition

3. 拼接内容并转为Blob
   严格按照multipart/mixed规范拼接所有部分（边界标识、换行符不能少），最后将拼接内容转为Blob。

4. Axios发送请求
   设置正确的Content-Type请求头，将Blob作为请求体发送。

完整代码示例 #

import axios from 'axios';

const sendMultipartMixedRequest = async (xmlString, fileArrayBuffer) => {
  // 生成边界字符串
  const boundaryString = `----MultipartBoundary${Date.now().toString(16)}`;

  // 构建XML部分
  const xmlPart = [
    `--${boundaryString}`,
    'Content-Type: application/xml',
    '', // 空行分隔头与内容
    xmlString,
  ].join('\r\n');

  // 构建文件部分（可根据实际调整Content-Type和文件名）
  const filePart = [
    `--${boundaryString}`,
    'Content-Type: application/octet-stream',
    'Content-Disposition: attachment; filename="target-file"',
    '', // 空行分隔头与内容
  ].join('\r\n');

  // 将所有内容转为字节数组并合并
  const encoder = new TextEncoder();
  const xmlBytes = encoder.encode(xmlPart);
  const fileHeaderBytes = encoder.encode(filePart);
  const fileContentBytes = new Uint8Array(fileArrayBuffer);
  const closingBoundaryBytes = encoder.encode(`\r\n--${boundaryString}--`);

  const combinedBytes = new Uint8Array([
    ...xmlBytes,
    ...encoder.encode('\r\n'),
    ...fileHeaderBytes,
    ...fileContentBytes,
    ...closingBoundaryBytes,
  ]);

  // 转为Blob格式
  const requestBody = new Blob([combinedBytes], {
    type: `multipart/mixed; boundary=${boundaryString}`,
  });

  try {
    // 发送请求
    const response = await axios.post('/your-api-endpoint', requestBody, {
      headers: {
        'Content-Type': `multipart/mixed; boundary=${boundaryString}`,
        // 可添加其他请求头如Authorization
      },
    });
    return response.data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
};

// 使用示例
// const xml = '<root><content>demo</content></root>';
// const fileContent = 你的ArrayBuffer变量;
// sendMultipartMixedRequest(xml, fileContent);

关键注意事项 #

• 格式严格性：multipart/mixed要求每个部分的头与内容之间必须有一个空行，边界标识前后的\r\n不能省略，否则服务端无法正确解析。
• 字节编码：字符串需用TextEncoder转为UTF-8字节数组，再与文件的Uint8Array合并，避免二进制内容被破坏。
• Content-Type适配：文件部分的Content-Type要匹配实际文件类型（如图片用image/jpeg），不确定时可用application/octet-stream作为通用二进制类型。

内容的提问来源于stack exchange，提问作者Anton Fil