React上传数据至AWS S3报错：TypeError: Cannot read properties of undefined (reading 'split')

首先明确：AWS S3支持上传任意类型的数据，并非仅支持图片。你遇到的错误是代码逻辑问题，不是S3的限制。

错误原因 #

你调用ReactS3Client.uploadFile()时传入的是自定义的objData对象（包含fileUrl和fileName），但react-aws-s3库的uploadFile方法要求传入原生浏览器File对象（也就是e.target.files[0]对应的对象）。库内部会尝试读取File对象的属性（比如文件类型、文件名后缀）并调用split方法，而你的自定义对象没有这些属性，所以触发了Cannot read properties of undefined (reading 'split')错误。

修正后的代码 #

import './App.css';
import { useState } from 'react';
import S3 from 'react-aws-s3';

function App() {

  window.Buffer = window.Buffer || require("buffer").Buffer;
  const config={
    bucketName: "bucket_name",
    region: "eu-west-2",
    dirName: "dire",
    accessKeyId: "accessKeyID",
    secretAccessKey: "secretAccessKey",
}

  // 保存原生File对象用于上传
  const [selectedFile, setSelectedFile] = useState(null);
  // 保存预览信息用于展示
  const [previewData, setPreviewData] = useState({
    fileUrl :'',
    fileName: ''
  })

  const handleFileInput = (e) => {
    const file = e.target.files[0];
    if(file) {
      setSelectedFile(file);
      // 仅更新预览数据
      setPreviewData({
        fileUrl: URL.createObjectURL(file),
        fileName: file.name
      })
    }
  }
  
  const handleUpload = async () => {
    if(!selectedFile) return; // 没有文件时不执行上传
    const ReactS3Client = new S3(config);
    ReactS3Client
        .uploadFile(selectedFile, "MyImage") // 传入原生File对象
        .then(data => console.log('上传成功:', data))
        .catch(err => console.error('上传失败:', err))
  }

  return (
    <div className="App">
      <div>
        <div>React S3 File Upload</div>
        <input type="file" onChange={handleFileInput}/>
        {/* 没有选择文件时禁用按钮 */}
        <button onClick={handleUpload} disabled={!selectedFile}> Upload to S3</button>
    </div>
    </div>
  );
}

export default App;

关键修改点 #

• 用selectedFile状态保存原生File对象，上传时直接传入该对象
• 拆分预览数据和上传数据，避免混淆
• 增加文件存在判断，防止无文件时触发上传

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