我正在编写一个小型应用程序,它将来自 React 应用程序的信息提交到 Express 服务器的“/download” API,然后将新文件写入本地文件系统,并使用 Express res.download 在客户端下载新创建的文件() 在 fs.writeFile() 回调中。
我一直使用常规的 html 表单提交来发布数据,但由于复杂性的增加,我已改用 Axios,但它不再起作用。
奇怪的是,只有客户端的下载似乎停止了。写入文件工作正常,所有控制台日志记录都是相同的(“文件已下载!”日志如下)。当我切换回表单提交时,它会继续工作,因此唯一的更改是使用 Axios 发送发布请求。据我所知,一旦数据到达那里,两者之间不应该有任何区别,但我希望有人比我更深入地了解这一点。
除了在表单和 Axios post 请求之间进行测试之外,我还尝试将 Axios 请求的内容类型从“application/json”更改为“x-www-form-urlencoded”,认为将内容类型与什么匹配发送的表格可能就是答案
以下是相关应用程序的相关代码片段:
服务器.js(节点 JS)
app.post('/download', (req, res) => {
console.log("Requst data");
console.log(req.body.html);
fs.writeFile("./dist/test.txt", res.body.test,
(err) => {
if(err) {
return console.log(err);
} else{
console.log("The file was saved!");
}
let file = __dirname + '/text.txt';
/*This is the issue, the file is not downloading client side for the Axios iteration below*/
res.download(file,(err)=>{
if(err){
console.log(err);
} else {
console.log(file);
/*This logs for both View.js iterations below*/
console.log("File downloaded!");
}
});
});
})
应用程序.js(反应)
handleSubmit(e){
e.preventDefault();
axios.post(`/download`, {test: "test"})
.then(res => {
console.log("REQUEST SENT");
})
.catch((error) => {
console.log(error);
});
}
render(){
return(
<div>
<View handleSubmit={this.handleSubmit} />
</div>
)
}
View.js(反应)
这有效:
render(){
return(
<form action="/download" method="post">
<input type="submit">
</form>
)
}
This doesn't在客户端启动下载,但其他方面工作正常:
render(){
return(
<form onSubmit={this.props.handleSubmit}>
<input type="submit">
</form>
)
}
我没有收到任何错误,除了客户端的下载之外,一切似乎都工作正常。
预期结果是使用 Axios 在客户端下载文件,但事实并非如此。
更新:碰撞,没有得到任何牵引力