Передача файла из приложения React в приложение Node для загрузки на S3, файл не определен при определении параметров загрузки?

Question

Я пытаюсь создать собственное резюме, используя React и Node, и у меня уже несколько часов возникают проблемы с загрузкой на AWS S3.

Я запускаю событие, когда отправка формы с файлом:

onSubmitChange = () => {
    const data = new FormData()
    data.append('url', this.state.url);
    data.append('name', this.state.name);
    data.append('description', this.state.description);
    data.append('filePath', this.state.file);

    fetch('http://localhost:3001/new-experience', {
        method: 'post',
        headers: {'Content-Type': 'multipart/form-data'},
        body: data
        // body: JSON.stringify({
        //     url: this.state.url,
        //     name: this.state.name,
        //     description: this.state.description,
        //     filePath: this.state.file,
        // })
    })
    .then(resp => console.log(resp));
}

, который затем вызывает этот

AWS.config.update({
    accessKeyId: process.env.AWSAccessKeyId,
    secretAccessKey: process.env.AWSSecretKey,
    region: 'eu-west-3'
});

const s3 = new AWS.S3();
app.post('/new-experience', (req, res) => {
    const { url, name, description, filePath } = req.body;

    console.log(filePath);

    const params = {
        Bucket: 'bucket-xxxx',
        Body : fs.createReadStream(filePath),
        Key : "folder/test.png"
     };

    s3.upload(params, function (err, data) {
        //handle error
        if (err) {
          console.log("Error", err);
         }

        //success
        if (data) {
          console.log("Uploaded in:", data.Location);
        }
    });

    db('mael-landrin').insert({
        experienceurl: url,
        experiencename: name,
        experiencedescription: description
    })
    .into('experiences')
    .then(resp => res.status(200).send('Experience added'))
    .catch(err => res.status(400).send(err));
})

Журнал консоли в 3-й строке маршрута "/ new-experience" возвращает неопределенное значение, которое я Поверьте, именно поэтому fs.createReadSream (filePath) дает неопределенную функцию, поэтому я получаю сообщение об ошибке.

Последний console.log () в части React дает мне все правильно, 3 строки и файл (файл .png).

Apple Website for Apple. https://www.apple.com/ File {name: "Entˆte Mozzarelline 25g x 8.jpg", lastModified: 1583766837712, lastModifiedDate: Mon Mar 09 2020 16:13:57 GMT+0100 (Central European Standard Time), webkitRelativePath: "", size: 454282, …}

Кто-нибудь знает, откуда он может взяться?

Answer 1

Что вы, вероятно, намеревались сделать, это добавить файл к данным, а не к пути к файлу. Так что сделайте это

data.append('file', this.state.file);

Вам также понадобится промежуточное программное обеспечение для анализа данных из нескольких частей.

Малтер работает очень хорошо.

https://www.npmjs.com/package/multer

Answer 2

Файловый объект не будет присутствовать в вашем req.body. Вам нужно установить сторонний модуль для загрузки файлов (конечно, есть «сырые» способы сделать это, но я не знаю как и не вижу причин для этого):

npm i express-fileupload

In Ваш express root файл:

const fileUpload = require('express-fileupload');
app.use(fileUpload());

Затем в вашем файле маршрут загрузки:

const { url, name, description} = req.body;
const fileObject = req.files.filePath;//"filePath" is misleading, but this is the name you chose.  
const fileData = fileObject.data;

const params = {
        Bucket: 'bucket-xxxx',
        Body : fileData,
        Key : "folder/test.png"
     }