Я пытаюсь взять входные данные zipfile из интерфейса реагирования и отправить его в экспресс-бэкэнд для последующей загрузки в корзину s3 и сохранения URL-адресов в базе данных mysql.
import React, { Component } from "react";
import axios from "axios";
class Home extends Component {
state = {
selectedFile: null
};
handleFileChange = e => {
this.setState({
selectedFile: e.target.files
});
};
submit = e => {
e.preventDefault();
const { description, selectedFile } = this.state;
let formData = new FormData();
formData.append("selectedFile", selectedFile);
console.log(formData);
const config = { headers: { "Content-Type": "multipart/form-data" } };
axios.post("http://localhost:3000/", formData, config);
};
render() {
const { selectedFile } = this.state;
return (
<div>
<form encType="multipart/form-data" method="post" name="fileinfo">
<input
type="file"
name="selectedFile"
onChange={this.handleFileChange}
/>
<button type="submit" onClick={e => this.submit(e)}>
Submit
</button>
</form>
</div>
);
}
}
export default Home;
Файл, кажется, достигает экспресс-бэкэнда. Я использую const formidable = require("express-formidable");
и app.use(formidable());
чтобы иметь возможность получать мультиформные данные. Вот мой экспресс-маршрут, на который поступает вызов axios
.
router.post("/", function(req, res) {
console.log(req.fields.selectedFile);
res.send("success");
});
При первой попытке отправки на веб-интерфейс я получаю ошибку 500, затем, если я нажимаю ее снова, она проходит без ошибок, и консоль печатает [object FileList]
и третий раз и каждый последующий раз после этого, я получаю Error: Can't set headers after they are sent.
. Поэтому точно не знаю, почему он не проходит в первый раз, и почему я не могу получить доступ к файлам в моем списке объектных файлов.