Я создаю конструктор блогов, в котором мне нужно загрузить изображение, поскольку изображение выбрано в событии onChange, и этот URL-адрес загруженного изображения необходимо обновить в состоянии.
После отправки запроса на загрузку изображения. Компонент обновляется автоматически, и выбранный файл и состояние также обновляются.
что делать, чтобы компонент не обновлялся, а setState обновлял правильный URL-адрес изображения ..
handleChange = async (event) =>
{
event.preventDefault();
if(event.target.name == 'file')
{
var x=event.target.files[0]
var y= event.target.name
let formData = new FormData();
formData.append('file',x)
const response = await axios.post('http://localhost:8009/post/image',formData,{
headers: {
'Content-Type': 'multipart/form-data'
}
})
let {data} = await response
console.log(data)
let file1 = data.name
this.setState({
content:{
key:uuid(),
name:y,
file:file1,
content:URL.createObjectURL(x)
}
})
}
}
Форма для изображения:
<input type="file" name="file" className="form-control-file" onChange={this.handleChange} required/>
Бэкэнд на узле:
router.post('/image',(req,res)=>
{
console.log(req)
let file = req.files.file;
filename = Date.now() + '-' + file.name;
file.mv(`./client/public/uploads/${filename}`, (err)=>{
if(err) throw err;
});
console.log(`/uploads/${filename}`);
res.json({name:`/uploads/${filename}`})
})