如何在axios发布后停止组件刷新.从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中称为热模块重新加载(，并且文件正在上传到服务器监视更改的任何文件夹中，那么保存的新文件可能是刷新的原因。

在我的案例中，将文件保存在受监控的文件夹之外解决了这个问题。