Как остановить компонент для обновления sh после публикации ax ios в реакции. После загрузки изображения из formData - PullRequest
Новая
       67

Как остановить компонент для обновления sh после публикации ax ios в реакции. После загрузки изображения из formData

0 голосов
/ 08 мая 2020

Я создаю конструктор блогов, в котором мне нужно загрузить изображение, поскольку изображение выбрано в событии 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}`})
})

1 Ответ

0 голосов
/ 28 мая 2020

Я вижу, вы загружаете в свою локальную среду. У меня была аналогичная проблема при работе с Vue, но затем я наткнулся на этот ответ от @fanfare, указав, что если вы используете какой-либо «горячий / живой refre sh» (в Vue называется Hot Module Reload) и файл загружается в любую из папок, которые сервер отслеживает на предмет изменений, тогда новый сохраняемый файл может быть причиной refre sh.

В моем случае сохранение файла вне отслеживаемой папки решило проблему.

...