Я пытался загрузить изображение с огромным в React с помощью Express для сохранения пути к изображению в базе данных. Я прочитал следующие уроки: Сиквелизирую crud с помощью expressjs
и Простая загрузка файлов с помощью Express.js и Грозный в Node.js
Беда в том, что я не могу смешивать изображения для загрузки из React и сохранять URL-адрес в базе данных.
У меня есть это в моем React Code для установки состояния:
picture(e){
this.setState({
picture:e.target.files[0]
});
console.log(e.target.files[0]);
}
В моем методе render () я просто обработал его:
<input type="file" onChange={this.picture} className="form-control-file" placeholder="Picture" name="picture"/>
В моем контроллере у меня есть этот код:
exports.create = (req, res) => {
// Save to MySQL database
var form = new formidable.IncomingForm();
var fileName;
form.parse(req);
form.on('fileBegin', function (name, file){
fileName='/home/public_html/react-panel/img/' + file.name;
file.path = '/home/public_html/react-panel/img/' + file.name;
console.log('fileBegin ' + fileName);
});
form.on('file', function (name, file){
console.log('Uploaded ' + file.name);
});
StrongDish.create({
id: req.body.id,
name: req.body.name,
description: req.body.description,
picture: fileName,
category: req.body.category,
price: req.body.price
}).then(strongDish => {
// Send created customer to client
res.send(strongDish);
});
};
Другие данные сохраняются в базе данных, кроме файла ima
Для создания поста я просто вызываю действие с переадресацией, отправляя данные о состоянии
export const addStrongDish=dish=>async dispatch=>{
const response = await axios.post('http://www.my-domain.co.cr/api/dish/add/',dish);
dispatch({
type:ADD_DISH,
payload:response.data
})
}