使用Axios发送multipart/mixed请求的教程

--boundary-string
Content-Disposition: name="request_payload"
Content-Type: text/xml

<tsRequest>
  <!-- XML 内容 -->
</tsRequest>
--boundary-string
Content-Disposition: name="tableau_workbook"; filename="workbook-file-name"
Content-Type: application/octet-stream

--content-of-workbook-file--
--boundary-string--

{
  "dependencies": {
    "axios": "^1.3.4",
    "form-data": "^4.0.0"
  }
}

const FormData = require("form-data");
const Axios = require("axios");

// 假设 XML 片段和文件内容已准备好
const xmlString = `<tsRequest>
  <workbook name="workbook-name" showTabs="show-tabs-flag" thumbnailsUserId="user-luid">
    <connections>
    <connection serverAddress="server-address" serverPort="port-number">
    <connectionCredentials name="connection-username" password="connection-password"
          embed="embed-flag" />
    </connection>
    </connections>
    <project id="project-id"/>
  </workbook>
</tsRequest>`;
const fileContentArrayBuffer = new ArrayBuffer(1024); // 替换为实际的 ArrayBuffer 文件内容

// 创建 FormData 实例
const form = new FormData();

// 添加第一个部分：XML 片段
form.append("request_payload", xmlString, {
  contentType: "text/xml", // 明确指定 Content-Type
});

// 添加第二个部分：二进制文件
form.append("tableau_workbook", Buffer.from(fileContentArrayBuffer), { // 在 Node.js 中，Buffer 更常用
  filename: "workbook-file-name.twb", // 指定文件名
  contentType: "application/octet-stream", // 明确指定 Content-Type
});

// 创建 Axios 客户端
const axiosClient = Axios.create({
  baseURL: "https://your-api-base-url.com", // 替换为你的 API 基础 URL
});

// 发送 POST 请求
async function sendMultipartMixedRequest() {
  try {
    const response = await axiosClient.post("sites/:siteId/workbooks", form, {
      headers: {
        ...form.getHeaders(), // 获取 form-data 自动生成的头部，包括 Content-Type 和边界
        // 关键一步：覆盖 Content-Type 为 multipart/mixed 并使用 form-data 的边界
        "Content-Type": `multipart/mixed; boundary=${form.getBoundary()}`,
      },
    });
    console.log("请求成功:", response.data);
    return response.data;
  } catch (error) {
    console.error("发送请求失败:", error.response ? error.response.data : error.message);
    throw error;
  }
}

// 调用函数发送请求
// sendMultipartMixedRequest();

import axios from 'axios'; // 假设你已安装并导入 Axios

/**
 * 在浏览器环境中发送 multipart/mixed POST 请求
 * @param {string} xmlString - 要发送的 XML 片段字符串
 * @param {ArrayBuffer} fileArrayBuffer - 要发送的二进制文件内容的 ArrayBuffer
 * @param {string} endpointUrl - API 接口的 URL
 * @returns {Promise<any>} - Axios 响应数据
 */
async function sendMultipartMixedInBrowser(xmlString, fileArrayBuffer, endpointUrl) {
    // 1. 生成一个唯一的边界字符串
    // 推荐使用随机字符串，确保与请求体内容不冲突
    const boundaryString = `----WebKitFormBoundary${Math.random().toString(36).substring(2, 15)}`;

    // TextEncoder 用于将字符串转换为 Uint8Array，以便与二进制数据一起处理
    const encoder = new TextEncoder();

    // 存储所有请求体部分的数组
    const requestBodyParts = [];

    // --- 第一部分：XML 片段 ---
    requestBodyParts.push(encoder.encode(`--${boundaryString}\r\n`)); // 边界
    requestBodyParts.push(encoder.encode(`Content-Disposition: name="request_payload"\r\n`)); // 内容处置
    requestBodyParts.push(encoder.encode(`Content-Type: text/xml; charset=UTF-8\r\n\r\n`)); // 内容类型和空行
    requestBodyParts.push(encoder.encode(xmlString + '\r\n')); // XML 内容和结束换行

    // --- 第二部分：二进制文件内容 ---
    requestBodyParts.push(encoder.encode(`--${boundaryString}\r\n`)); // 边界
    requestBodyParts.push(encoder.encode(`Content-Disposition: name="tableau_workbook"; filename="workbook-file-name.twb"\r\n`)); // 内容处置（包含文件名）
    requestBodyParts.push(encoder.encode(`Content-Type: application/octet-stream\r\n\r\n`)); // 内容类型和空行
    requestBodyParts.push(fileArrayBuffer); // 直接添加 ArrayBuffer 形式的文件内容
    requestBodyParts.push(encoder.encode('\r\n')); // 结束换行

    // --- 最终边界 ---
    requestBodyParts.push(encoder.encode(`--${boundaryString}--\r\n`)); // 最终边界（注意末尾的两个短横线）

    // 2. 将所有部分组合成一个 Blob 对象
    // Blob 构造函数可以接受 DOMString, ArrayBuffer, ArrayBufferView, Blob, File 等类型
    const requestBodyBlob = new Blob(requestBodyParts, {
        type: `multipart/mixed; boundary=${boundaryString}` // 指定整个请求体的 Content-Type
    });

    // 3. 使用 Axios 发送请求
    try {
        const response = await axios.post(
            endpointUrl,
            requestBodyBlob, // 直接发送 Blob 对象作为请求体
            {
                headers: {
                    'Content-Type': `multipart/mixed; boundary=${boundaryString}`, // 再次设置 Content-Type 头部
                    // 可以在此处添加其他必要的头部，如认证信息
                    // 'Authorization': 'Bearer your_token'
                },
            }
        );
        console.log('请求成功:', response.data);
        return response.data;
    } catch (error) {
        console.error('发送请求失败:', error.response ? error.response.data : error.message);
        throw error;
    }
}

// 示例用法（在 React 组件或其他浏览器环境中）
// const myXmlData = '<tsRequest><workbook name="my-report">...</workbook></tsRequest>';
// const myFileData = new ArrayBuffer(1024); // 假设这是从文件读取的 ArrayBuffer
// // 或者从 File 对象获取 ArrayBuffer:
// // const fileInput = document.getElementById('fileInput');
// // const file = fileInput.files[0];
// // const reader = new FileReader();
// // reader.onload = (e) => {
// //   const fileArrayBuffer = e.target.result;
// //   sendMultipartMixedInBrowser(myXmlData, fileArrayBuffer, 'https://your-api-endpoint/sites/:siteId/workbooks');
// // };
// // reader.readAsArrayBuffer(file);

// sendMultipartMixedInBrowser(myXmlData, myFileData, 'https://your-api-endpoint/sites/:siteId/workbooks');