如何在Ant Design Upload组件中获取文件内容字符串并展示？

当然可以实现！Ant Design的Upload组件只是封装了原生文件上传的逻辑，原生File对象本身并没有直接提供file.data这类属性来获取内容，不过我们可以借助原生FileReader API来读取文件内容字符串，完全满足你的需求。

实现思路 #

1. 在beforeUpload回调里，利用FileReader读取选中的文件
2. 通过readAsText()方法读取文本类文件（适配你的.txt/.csv需求）
3. 监听FileReader的load事件，拿到文件内容后就可以展示在页面上了
4. 保持return false阻止默认的上传行为

完整代码示例 #

import { Upload, Button, Icon } from 'antd';
import { useState } from 'react';

// 封装文件读取的工具函数，返回Promise方便异步处理
const readTextFile = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    
    // 读取成功时触发
    reader.onload = (event) => {
      resolve(event.target.result); // event.target.result就是文件内容字符串
    };
    
    // 读取失败时触发
    reader.onerror = (error) => {
      reject(new Error(`读取文件失败: ${error.message}`));
    };
    
    // 以文本格式读取文件，可指定编码（默认utf-8）
    reader.readAsText(file, 'utf-8');
  });
};

const FileUploader = () => {
  // 用state存储文件内容，用于页面展示
  const [fileContent, setFileContent] = useState('');

  return (
    <div>
      <Upload
        accept=".txt, .csv"
        showUploadList={false}
        beforeUpload={async (file) => {
          try {
            // 异步读取文件内容
            const content = await readTextFile(file);
            console.log('读取到的文件内容:', content);
            // 更新state，把内容展示在页面上
            setFileContent(content);
          } catch (err) {
            console.error(err);
            // 这里可以加个提示用户读取失败的弹窗
          }
          // 阻止默认上传行为
          return false;
        }}
      >
        <Button>
          <Icon type="upload" /> Click to Upload
        </Button>
      </Upload>

      {/* 展示读取到的文件内容 */}
      {fileContent && (
        <div style={{ marginTop: 20, padding: 10, border: '1px solid #eee' }}>
          <h4>文件内容预览:</h4>
          <pre>{fileContent}</pre>
        </div>
      )}
    </div>
  );
};

export default FileUploader;

关键细节说明 #

• 为什么不用file.data？：原生File对象只是浏览器对本地文件的引用，并非文件内容本身，必须通过FileReader来读取内容。
• 异步处理：用Promise+async/await处理文件读取，避免回调嵌套，代码更清晰。
• 编码控制：readAsText()的第二个参数可以指定文件编码，比如gbk，适配不同编码的文本文件。
• 页面展示：通过React的useState存储内容，直接在JSX中渲染即可，这里用<pre>标签保留文本的换行和格式。

额外提示 #

如果需要处理大文件，建议在读取前判断文件大小，避免页面卡顿；如果是其他类型的文件（如图片），可以改用readAsDataURL()读取base64格式的内容。

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