Блог

У меня возникли проблемы при загрузке файла из 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. Может быть, кому-то тоже пригодится этот код 🙂

‘fs’ является основным модулем NodeJS и не может использоваться в React. React запускается в браузерах, и у них нет прямого API для доступа к файловым системам, в отличие от Node.

Для React вы, вероятно, добьетесь большего успеха, используя react-aws-s3