在 React 中使用 fs 和 aws-sdk

Question

我在将文件从 HTML 加载到 AWS s3 时遇到问题。我已经用 node.js 运行这个脚本手动测试了这个，使用硬编码值，它可以工作。虽然我在 REACT 中实现这个有困难，因为有这个错误：

TypeError: fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync is not a function

我相信我的代码很简单：

HTML 是：

 <div className="single-file-input">
            <input
              type="file"
              id="user_image"
              name="user_image"
              onChange={this.handleFiles}
            />
            <div>
              Upload a picture<i className="fa fa-upload"></i>
            </div>
          </div>

那么js函数如下：

handleFiles = (e) => {
uploadFile(e.target.files);

};

我正在从 utils 文件 import { uploadFile } from "../../../utils/upload"; 导入此函数，它看起来像：

import fs from "fs";
import AWS from "aws-sdk";

/*const fs = require("fs");
const AWS = require("aws-sdk");*/

//The Below Three are defined, not adding them here of course. 
const ID = "";
const SECRET = "";
const BUCKET_NAME = "";

const s3 = new AWS.S3({
  accessKeyId: ID,
  secretAccessKey: SECRET,
  Bucket: BUCKET_NAME,
  CreateBucketConfiguration: {
    // Set your region here
    LocationConstraint: "eu-west-1",
  },
});

export const uploadFile = (fileName) => {
  // Read content from the file
  const fileContent = fs.readFileSync(fileName[0].name);

  // Setting up S3 upload parameters
  const params = {
    Bucket: BUCKET_NAME,
    Key: "TESTFILE.jpg", // File name you want to save as in S3
    Body: fileContent,
  };

  // Uploading files to the bucket
  s3.upload(params, function (err, data) {
    if (err) {
      throw err;
    }
    //Data location is used in order to get the data location in AWS S3
    console.log(`File uploaded successfully. ${data.Location}`);
  });
};

我需要使用 API 吗，或者我在流程中不理解什么，我认为既然脚本是独立的，它应该在这里也能工作，但事实并非如此。

我错过了什么？

P.s。也许有人也会使用此代码:)

Answer 1

'fs'是NodeJS核心模块，不能在React中使用。 React 在浏览器中运行，它们没有直接 API 访问文件系统，不像 Node.

对于 React，使用 react-aws-s3

可能会取得更大的成功

在 React 中使用 fs 和 aws-sdk

Using fs and aws-sdk in React

fs

node.js

reactjs

aws-sdk