React 应用程序不会将图像上传到 aws S3答案

【问题标题】：React app will not upload image to aws S3React 应用程序不会将图像上传到 aws S3
【发布时间】：2022-02-10 16:45:22
【问题描述】：

我有一个 React 应用程序，我正在尝试对其进行配置，以使用户能够通过发布表单上传图像。表单中还有其他字段。

后端在这里：https://github.com/JohnTarvis/a2backend 前端在这里：https://github.com/JohnTarvis/a2frontend

网站托管在这里：https://anonsanonymous.netlify.app/

我正在尝试合并来自该线程的代码：Simple file upload to S3 using aws-sdk and Node/Express

具体来说：


const express = require('express'); //"^4.13.4"
const aws = require('aws-sdk'); //"^2.2.41"
const bodyParser = require('body-parser');
const multer = require('multer'); // "^1.3.0"
const multerS3 = require('multer-s3'); //"^2.7.0"

aws.config.update({
    secretAccessKey: 'YOUR_ACCESS_SECRET_KEY',
    accessKeyId: 'YOUR_ACCESS_KEY_ID',
    region: 'us-east-1'
});

const app = express();
const s3 = new aws.S3();

app.use(bodyParser.json());

const upload = multer({
    storage: multerS3({
        s3: s3,
        acl: 'public-read',
        bucket: 'YOUR_BUCKET_NAME',
        key: function (req, file, cb) {
            console.log(file);
            cb(null, file.originalname); //use Date.now() for unique file keys
        }
    })
});

//open http://localhost:3000/ in browser to see upload form
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

//used by upload form
app.post('/upload', upload.array('upl',1), (req, res, next) => {
    res.send("Uploaded!");
});

app.listen(3000, () => {
    console.log('Example app listening on port 3000!');
});

我在后端使用 router.js 而不是 app.js 有类似的东西

router.post("/",upload.array('upload',1), async function (req, res, next) {
  try {
    const validator = jsonschema.validate(req.body, postNewSchema);
    if (!validator.valid) {
      const errs = validator.errors.map(e => e.stack);
      throw new BadRequestError(errs);
    }
    
    const newPost = await Post.create(req.body);
    return res.status(201).json({ newPost });
  } catch (err) {
    return next(err);
  }
});

这是我在前端的上传表单：

                <div className="form-group">
                  <label>Upload File</label>
                  <input 
                    type="file" 
                    name="upload"
                    value={formData.image}
                    onChange={(e) => setSelectedFile(e.target.files[0])}
                  />
                </div>

帖子出现，但图片未上传。我认为在我的前端和后端之间传输文件可能是一个问题。我从这里复制的基本应用程序上传到我的 S3，但不是我正在处理的主要应用程序。是我的上传表单还是我的快递后端有问题？我只发布了我的部分代码，因为它有几十个文件，但如果您需要查看更多，我会添加它。

【问题讨论】：

后端能成功接收文件吗？
你设置了将对象放入s3的权限吗？
@TristanMüller 是的
@ApoorvaChikara 问题来了。出于某种原因，当我从 axios 请求控制台记录某些内容时，它不会显示在 Heroku 控制台中。我将尝试其他测试方式，但我怀疑这可能是罪魁祸首。

标签： javascript node.js reactjs amazon-web-services express

【解决方案1】：

第 0 步：登录到您的 aws 控制台。搜索 Amazon S3 并单击创建存储桶。第 1 步：引导反应。您需要创建我们的反应应用程序。第 2 步：导入 react-aws-s3。第三步：设置文件结构。第 4 步：将环境变量添加到 . 第 5 步：设置我们的上传组件。第6步：抓取文件。第 7 步：更新 AWS S3 CORS。第 6 步：实现上传功能。

我还是新手，但我希望我能提供帮助，祝你好运！ :)

【讨论】：

是的，我做了所有这些。