React中如何选择文件并转换为字符串发送至后端

前端React实现逻辑 #

核心思路是通过浏览器原生FileReader接口，将用户选中的图片文件转为Base64格式的字符串，再随其他表单字段一起提交给后端。

• 给文件选择input绑定change事件，拿到用户选中的文件对象
• 校验文件类型为图片后，调用FileReader的readAsDataURL方法读取文件，读取完成后拿到的结果就是可直接传输的Base64字符串
• 提交请求时直接把该字符串赋值给picture字段传给后端即可，拿到的字符串还可以直接赋值给img标签的src属性做实时预览

参考实现代码：

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

export default function PostPublish() {
  const [pictureStr, setPictureStr] = useState('');
  const [content, setContent] = useState('');

  // 处理文件选择
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) {
      alert('请选择图片类型文件');
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      // reader.result 即为转换完成的Base64字符串，格式为 data:image/xxx;base64,xxxx
      setPictureStr(reader.result);
    };
    reader.onerror = () => alert('文件读取失败，请重试');
    reader.readAsDataURL(file);
  };

  // 提交数据到后端
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!pictureStr) {
      alert('请先选择要上传的图片');
      return;
    }
    try {
      await axios.post('/api/posts', {
        content,
        picture: pictureStr
      });
      alert('帖子发布成功');
      // 提交成功后的重置、跳转逻辑按需添加
    } catch (err) {
      console.error('提交失败:', err);
      alert('提交失败，请重试');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="输入帖子内容"
      />
      <input
        type="file"
        accept="image/*"
        onChange={handleFileChange}
      />
      {pictureStr && <img src={pictureStr} alt="预览图" style={{maxWidth: 200}} />}
      <button type="submit">发布帖子</button>
    </form>
  );
}

后端Express+MongoDB实现逻辑 #

你已经在Post模型中定义了picture字段为string类型，只需要调整请求体大小限制，正常接收存储即可：

• Express默认的JSON请求体解析上限仅为100kb，Base64编码后的图片体积会比原文件大33%左右，必须调大express.json的limit参数，否则上传稍大的图片就会报413请求体过大错误
• 接口直接从请求体中拿到picture字段的字符串，存入MongoDB对应字段即可，后续查询返回的结果可以直接给前端做图片展示，不需要额外解码转换

参考实现代码：

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();

// 重点：调大JSON请求体解析上限，数值根据自身业务需要调整
app.use(express.json({ limit: '10mb' }));
app.use(cors());

// Post模型和你现有定义保持一致即可，此处为参考
const Post = mongoose.model('Post', new mongoose.Schema({
  content: String,
  picture: String,
  createTime: { type: Date, default: Date.now }
}));

// 帖子提交接口
app.post('/api/posts', async (req, res) => {
  try {
    const { content, picture } = req.body;
    if (!picture) return res.status(400).json({ msg: '图片不能为空' });
    const newPost = await Post.create({ content, picture });
    res.json(newPost);
  } catch (err) {
    console.error('帖子存储失败:', err);
    res.status(500).json({ msg: '服务异常' });
  }
});

// 帖子列表接口，直接返回存储的picture字符串即可
app.get('/api/posts', async (req, res) => {
  const postList = await Post.find().sort({ createTime: -1 });
  res.json(postList);
});

mongoose.connect('你的MongoDB连接地址').then(() => {
  app.listen(3000, () => console.log('服务启动在3000端口'));
});

注意事项 #

• 该方案仅适用于小体量图片场景（比如单张图体积在2MB以内的头像、动态缩略图），如果需要支持高清大图、多图上传，不建议把Base64字符串直接存在MongoDB中，会导致单文档体积过大、查询性能下降，这类场景建议将图片存在专门的文件存储服务，数据库仅保存图片访问地址
• 如果服务外层部署了Nginx等反向代理，出现413错误时还需要同步调整Nginx的client_max_body_size配置
• 不需要额外引入第三方文件上传依赖，原生FileReader就能完成字符串转换，没有额外学习成本

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