如何使用Axios发送带认证头的二进制文件POST请求？

Absolutely! Axios can definitely handle binary file uploads with authentication tokens—you just need to tweak your approach a bit. Let’s break down why your initial attempt didn’t work, then walk through the correct methods.

First, a quick note on your original code:

• You used the header Authentication, but most servers expect the standard Authorization header (usually with a scheme like Bearer before the token). That could be part of the issue.
• When passing a File directly to Axios, it should auto-set the Content-Type header to the file’s MIME type—but if your File instance wasn’t properly retrieved (e.g., it was undefined), Axios might fall back to application/x-www-form-urlencoded.

Method 1: Upload Raw Binary File (Simplest for Raw Accepting Servers) #

If your server accepts raw binary data (no form wrapper), use this approach:

const uploadUrl = "your-server-endpoint";
const selectedFile = document.getElementById("file-input").files[0];
const authToken = "faketoken";

axios.post(uploadUrl, selectedFile, {
  headers: {
    // Use the standard Authorization header (adjust the scheme if your server uses something else)
    'Authorization': `Bearer ${authToken}`,
    // Optional: Axios will auto-set this to the file's type, but you can explicitly set it if needed
    // 'Content-Type': selectedFile.type
  }
})
.then(res => console.log("Upload succeeded!", res))
.catch(err => console.error("Upload failed:", err));

Method 2: Upload via FormData (Most Common for File Uploads) #

Many servers expect files to be sent as part of a multipart/form-data request (especially if you need to send extra fields with the file). Here’s how to do that:

const uploadUrl = "your-server-endpoint";
const selectedFile = document.getElementById("file-input").files[0];
const authToken = "faketoken";

// Create FormData and append your file (the first argument is the field name your server expects)
const formData = new FormData();
formData.append("uploaded_file", selectedFile);

axios.post(uploadUrl, formData, {
  headers: {
    'Authorization': `Bearer ${authToken}`,
    // Don't manually set Content-Type here! Axios auto-adds the correct multipart header with a boundary string
  }
})
.then(res => console.log("Upload succeeded!", res))
.catch(err => console.error("Upload failed:", err));

Key Tips to Avoid Headaches: #

• Skip manual multipart/form-data headers: If using FormData, let Axios handle this—it adds a unique boundary string the server needs to parse the form correctly.
• Validate your File instance: Double-check that selectedFile is a valid File object (make sure your file input’s files[0] isn’t undefined).
• Confirm server expectations: Ask or check docs if your server wants raw binary or form-data formatted uploads—this dictates which method to use.

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