React组件中如何编码HTML输入的文件并实现上传？

首先明确两个核心限制：

1. 浏览器出于安全策略，无法获取用户本地文件的真实路径，你没法通过文件路径去读取内容。
2. fs是Node.js专属的文件系统模块，浏览器环境完全不支持，直接在前端代码里调用会报错。

你不需要文件路径，直接通过已存储的selectedFile（File对象）就能完成编码，用浏览器原生的FileReader API即可实现base64转换。

修正后的完整代码 #

import React, { useState } from "react";
import { Button } from "@mui/material";

function UploadCVButton() {
    const [selectedFile, setSelectedFile] = useState(null);
  
    const handleFileInputChange = (event) => {
      setSelectedFile(event.target.files[0]);
    };
  
    const handleFormSubmit = (event) => {
      event.preventDefault();
      if (!selectedFile) {
        alert("请先选择文件");
        return;
      }

      // 使用FileReader读取文件并转换为base64
      const reader = new FileReader();
      reader.onload = function(e) {
        // 拆分base64字符串，去掉"data:xxx/xxx;base64,"前缀，只保留编码部分
        const base64String = e.target.result.split(',')[1];

        // 发送请求到后端
        $.ajax({
          url: '你的接口地址',        
          method: 'post',            
          dataType: 'json',          
          data: { encoded: base64String },     
          success: function(data){  
            alert(data); 
          },
          error: function(err) {
            alert('上传失败：' + err.message);
          }
        });
      };
      // 以base64格式读取选中的文件
      reader.readAsDataURL(selectedFile);
    };
  
    return (
      <form onSubmit={handleFormSubmit}>
        <label htmlFor="file-input">选择文件:</label>
        <input
          id="file-input"
          type="file"
          accept=".jpg, .jpeg, .png, .pdf"
          onChange={handleFileInputChange}
        />
        <Button type="submit" disabled={!selectedFile}>上传</Button>
      </form>
    );
}

export default UploadCVButton;

关键修改说明 #

• 移除了fs和base64-js的无效依赖，改用浏览器原生API完成编码
• 增加文件选择校验，避免空提交的情况
• 用readAsDataURL直接读取选中的File对象，自动生成base64编码字符串
• 拆分base64字符串，去掉冗余前缀后再传给后端，符合大多数接口的参数要求
• 给上传按钮增加disabled状态，未选文件时无法点击，优化交互体验

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