通过我的前端从节点快速服务器下载 JSON 文件

Question

我已将文件上传到我的项目目录中的下载文件夹后存储。 我想从前端下载该保存的文件。 当我点击下载按钮时，它不会获取文件。

当我在 express 应用上转到 http://localhost:5000/download 时，我收到了此错误消息

错误：发送后无法设置标头。

Express 服务器代码：

app.get('/download', (req, res) => {
    res.send('file downloaded')
    const file = './downloads/output.yml';
    res.download(file, 'openapi.yml', (err) => {
        if (err) {
            console.log(err)
        } else {
            console.log('file downloaded')
        }
    });
});

前端应用代码：

HTML：

<button class="download-btn">download</button>

脚本：

const handleDownload = async () => {
    const res = await fetch("https://cors-anywhere.herokuapp.com/http://localhost:5000/download");
    const blob = await res.blob();
    download(blob, 'output.yml');
}

downloadBtn.addEventListener('click', handleDownload);

文件夹结构：

更新： 服务器.js

const uploadFiles = async (req, res) => {
    const file = await req.files[0];
    console.log(file)
    postmanCollection = file.path;
    outputFile = `downloads/${file.filename}.yml`
    convertCollection();
    res.json({ message: "Successfully uploaded files" });
}

app.post("/upload_files", upload.array("files"), uploadFiles);

请大家帮帮我。

Answer 1

您已经在使用res.send，它将响应标头发送回客户端，结束请求响应周期，当您尝试执行res.download 时，它会引发错误。改为使用

 app.get('/download', (req, res) => {
      const file = './downloads/output.yml';
        res.download(file, 'openapi.yml', (err) => {
            if (err) {
                console.log(err)
            } else {
                console.log('file downloaded')
            }
        });
    });

res.send('file downloaded')--->删除这一行

你也需要更新你的js代码

const handleDownload = async () => {
    const res = await fetch("https://cors-anywhere.herokuapp.com/download"); //http://localhost:5000--->this is not required
    const blob = await res.blob();
    download(blob, 'output.yml');
}

downloadBtn.addEventListener('click', handleDownload);