Не удается отправить файл в конечную точку Express с помощью Axios через React

Я в полном тупике. Я часами рылся в SO в поисках ответов и, кажется, не могу заставить ничего работать.

  • Приложение React

  • Axios для AJAX

  • Попытка отправить файл на конечную точку Express с помощью multer.

Моя конечная точка:

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });


router.post("/", upload.single("file"), async (req, res) => {
    let file = req.file.buffer; //...file is undefined from Axios, has buffer from Postman and works
    //...etc...
});

Моя форма:

onChangeFile = e => {
    let file = e.target.files[0];
    let formData = new FormData();
    formData.append("file", formData);
    const reqParams = {
        method: "POST",
        url: `https://myapi.com/documents`,
        data: {
            "file": formData
        },
        headers: {
            "my_custom_header": "ABC123"
        }
    };
    axios(reqParams)
        .then(result => console.info(JSON.stringify(result, null, 4)))
        .catch(e => console.info(e));
}

render() {
    <form encType = "multipart/form-data">
        <input type = "file" name = "file" id = "file" onChange = {this.onChangeFile} />
    </form>
}

Вывод результата Axios сверху:

{
    "data": [
        {
            "source": "system",
            "type": "json",
            "status": 200,
            "reason": null,
            "message": "Successful",
            "error": false,
            "date": "2018-08-28T21:35:36.000Z",
            "payload": {
                "my_custom_header": "ABC123",
                "file": {}
            }
        }
    ],
    "status": 200,
    "statusText": "OK",
    "headers": {
        "content-type": "application/json; charset=utf-8"
    },
    "config": {
        "transformRequest": {},
        "transformResponse": {},
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=utf-8",
            "my_custom_header": "ABC123"
        },
        "method": "post",
        "url": "https://myapi.com/documents",
        "data": "{\"file\":{}}"
    },
    "request": {}
}

Конечная точка отлично работает с Postman. Я изначально следил за этой статьей: https://blog.stvmlbrn.com/2017/12/17/upload-files-using-react-to-node-express-server.html

formData.append('uploadFile', file, file.name); ??
xadm 29.08.2018 00:41

@xadm Пробовал и ничего не меняет. Также попробовал объект Blob, переданный в FormData - без изменений.

Tsar Bomba 29.08.2018 15:31

код обновления, конечно, это не будет formData.append("file", formData);, это должен быть formData.append("file", file); и позже в параметрах, а не data:formData. Если все еще не работает, попробуйте что-нибудь подобное: stackoverflow.com/a/43014086/6124657

xadm 29.08.2018 15:55
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
440
0

Другие вопросы по теме