如何在React JS中将文件转Base64通过Axios请求体上传图片/文件？

Base64 编码的文件内容是纯字符串，可以直接序列化到JSON请求体中传输，完全可以绕开FormData格式，具体实现分三步：

1. 封装文件转Base64的通用方法 #

利用浏览器原生FileReaderAPI即可完成File对象到Base64的转换，封装为Promise方便异步调用：

const fileToBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (err) => reject(err)
  })
}

该方法返回的结果默认带DataURL前缀，格式为data:[文件MIME类型];base64,[实际Base64内容]，如果后端只接收纯Base64字符串，拿到结果后调用split(',')[1]截掉前缀即可。

2. 组件内处理文件选择逻辑 #

在React组件中绑定文件选择输入框的onChange事件，拿到选中的文件后可以先做类型、大小校验，避免无效上传：

import { useState } from 'react'
import axios from 'axios'

function ImageUpload() {
  const [selectedFile, setSelectedFile] = useState(null)

  const handleFileSelect = (e) => {
    const file = e.target.files[0]
    if (!file) return
    // 示例校验：仅允许上传2M以内的图片
    if (!file.type.includes('image/')) {
      alert('请选择图片文件')
      return
    }
    if (file.size > 2 * 1024 * 1024) {
      alert('图片大小不能超过2M')
      return
    }
    setSelectedFile(file)
  }

3. 发起Axios POST请求提交数据 #

点击上传按钮时，先将选中的文件转为Base64格式，和文件名、文件类型等元信息一起组装到请求体中，直接通过Axios POST提交即可，不需要手动修改请求头，Axios会自动将Content-Type设为application/json：

const handleUpload = async () => {
    if (!selectedFile) return
    try {
      const base64Content = await fileToBase64(selectedFile)
      // 组装请求体，业务参数可以直接和文件数据放在一起
      const payload = {
        fileName: selectedFile.name,
        fileType: selectedFile.type,
        fileContent: base64Content,
        // 其他业务字段直接追加即可，比如bizId、uploadUser等
      }
      const { data } = await axios.post('/api/your-upload-interface', payload)
      console.log('上传成功', data)
      // 上传成功后的后续逻辑
    } catch (err) {
      console.error('上传失败', err)
    }
  }

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileSelect} />
      <button onClick={handleUpload} disabled={!selectedFile}>
        上传图片
      </button>
    </div>
  )
}

export default ImageUpload

注意事项 #

• Base64编码会让文件体积比原二进制文件大33%左右，超过5M的文件不建议用这种方式传输，会明显增加请求耗时、占用额外带宽，大文件场景优先选择分片上传+FormData的方案。
• 后端接收到数据后，需要根据传入的文件类型，将Base64内容解码为二进制流后保存为文件，如果前端传了带前缀的DataURL格式，后端需要先截掉前缀部分再解码。
• 多文件上传场景下，遍历选中的文件列表逐个转Base64，将结果组装为数组放入请求体即可，逻辑和单文件上传一致。

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