如何在 axios post in React 后停止组件刷新。从 formData 上传图像后

Question

我正在构建一个博客生成器，我需要在 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}`})
})

Answer 1

我看到您正在上传到本地环境。我在使用 Vue 时遇到了类似的问题，但随后 @fanfare 偶然发现了这个答案，指出如果您使用任何类型的“热/实时刷新”（在 Vue 中称为热模块重新加载）并且文件正在上传在服务器监视更改的任何文件夹中，保存的新文件可能是刷新的原因。

就我而言，将文件保存在受监视的文件夹之外解决了该问题。