javascript - 未捕获的 TypeError：fs.​​readFileSync 不是浏览器控制台中的函数错误

Question

我正在尝试使用以下代码通过反应将图像上传到亚马逊 s3 存储桶。我在浏览器控制台中收到错误“Uncaught TypeError: fs.readFileSync is not a function”。有人可以帮忙吗？我正在从另一个组件调用此上传功能，无论如何页面正在加载，在选择文件后抛出上述错误。

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import {AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react'
import ReactS3 from 'react-s3';
const file = require('fs')
const AWS = require ("aws-sdk")
const key_ID = "**********" //IAM key id
const SECRET_KEY = "************************"
const Bucket_name = "mediabucket321";
const s3 = new AWS.S3({
     accessKeyId: key_ID,
     secretAccessKey: SECRET_KEY, 
});



Amplify.configure(awsconfig)

class upload extends Component {

    upload(e){
        const filename=e.target.files[0].name;
        console.log(filename);
        console.log("before upload");
    console.log(file);
        const fileContent = file.readFileSync(filename);
const params = {
        Bucket: Bucket_name,
        Key: 'img1.jpg',
        Body: fileContent,
        ContentType: "jpg"
    }
        s3.upload(params,(err,data)=>{
        if(err){
            console.log(err)

        }
        else{
            console.log("File uploaded successfully",data.Location);
        }
    })
    }
  render() {
      return (
          <div style={{ display: 'flex', justifyContent: 'center', padding: 30 }}>
              <div><h2>Upload a movie here</h2>
                   <h2>Enter the file location and click upload</h2>
                <input type="text" name ="upload"/> <br/>
                <input type="file" onChange = {this.upload}/>
              </div>
          </div>
      );
  }
}

export default upload;

标签： javascriptnode.jsreactjsamazon-s3

Answer 1

fs库在浏览器中不可用，它是 nodejs 特定的。