如何使用axios不借助FormData API上传文件 适配image/jpeg接口要求

核心原因 #

要求请求头Content-Type为image/jpeg的接口，预期请求体为纯JPEG图片的二进制数据流，不需要任何表单封装。FormData的作用是生成multipart/form-data格式的请求体，用于同时传递多组表单字段（比如文本参数+文件），天然不符合这类接口的要求。

推荐方案：不使用FormData直接上传二进制流 #

该方案完全符合接口规范，实现简单，传输效率更高。

浏览器端原生JS实现 #

// 绑定文件选择器的change事件
const fileInput = document.querySelector('input[type="file"][accept="image/jpeg"]');
fileInput.addEventListener('change', async (event) => {
  const selectedFile = event.target.files[0];
  if (!selectedFile) return;

  try {
    const uploadResponse = await fetch('https://你的接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'image/jpeg'
      },
      body: selectedFile // 直接传入文件二进制对象，无需封装
    });
    const result = await uploadResponse.json();
    console.log('上传成功', result);
  } catch (err) {
    console.error('上传失败', err);
  }
});

Node.js环境实现（以axios为例） #

const fs = require('fs');
const axios = require('axios');

async function uploadJpegImage() {
  // 读取本地JPEG文件为二进制流
  const imageBinary = fs.readFileSync('./本地图片路径.jpg');
  try {
    const response = await axios.post('https://你的接口地址', imageBinary, {
      headers: {
        'Content-Type': 'image/jpeg'
      }
    });
    console.log('上传成功', response.data);
  } catch (err) {
    console.error('上传失败', err);
  }
}

兼容场景：接口支持multipart格式，仅要求文件字段MIME类型为image/jpeg #

如果经确认接口支持multipart/form-data格式，只是要求表单中文件对应的字段Content-Type为image/jpeg，可以通过FormData.append的第三个参数指定文件MIME类型：

const formData = new FormData();
// 第三个参数可自定义文件名和MIME类型
formData.append('image_field', selectedFile, 'upload.jpg');

// 发送请求时不要手动设置Content-Type，由浏览器自动生成带boundary的multipart头
fetch('https://你的接口地址', {
  method: 'POST',
  body: formData
});

注意：该场景下整个请求的Content-Type仍为multipart/form-data，仅表单内的文件字段MIME类型符合image/jpeg要求，不适用于接口强制要求整个请求Content-Type为image/jpeg的场景。

内容的提问来源于stack exchange，提问作者Jeff P Chacko