从 MongoDB 下载文件时在 Chrome 中出现“失败 - 文件不完整”

Question

我的 JavaScript 应用程序允许用户下载文件。 该页面显示指向该文件的可单击链接。 该文件存储在 MongoDB。当我点击链接下载文件时，我在 Chrome 中收到“失败 - 文件不完整”。 文件下载应该显示在我的下载文件中，但它没有。 我不知道出了什么问题，我希望这里有人可以阐明这个问题。

这个应用程序是使用 node/express/ejs/MongoDB 构建的

这是路由器代码：

router.get('/:id/download', async (req, res) => {

    try {

        const bug = await Bug.findById(req.params.id)
        let buf = Buffer.from(bug.files)

        res.writeHead(200, {
            'Content-Disposition': `attachment; filename="${bug.fileName}"`,
            'Content-Type': bug.fileType,
            'Content-Length': buf.length,
        }).end()

        fs.writeFile(bug.fileName, buf, (err) => {
            if (err) {
                console.log(err);
            }
            else {
                console.log("File written successfully\n");
            }
        })

    } catch (err) {
        console.log("error downloading file", err)
    }

    res.end()
})

这是 HTML：

<div class="container-sm mt-5">
    <div class="row">
        <div class="col-lg-3"></div>
            <div class="col-lg-6">
                <h2>Bug Details</h2>
                <p>Title: <%= bug.title %></p>
                <p>Description: <%= bug.description %></p>
                <p>Category: <%= bug.category %></p>
                <p>Status: <%= bug.status %></p>
                <p>Priority: <%= bug.priority %></p>
                <p>Supporting Documents: </p>
                <a href="/<%= bug.id %>/download"><%= bug.fileName %></a>
                <div>
                <a href="/<%= bug.id %>/edit">Edit</a>
                <form class="mt-3" method="POST" action="/<%= bug.id %>?_method=DELETE">
                    <button type="submit">Delete</button>
                </form>
            </div>
            </div>
        <div class="col-lg-3"></div>
    </div>
</div>

在 MongoDB 中，文件作为文档的一部分存储：

files: {
        type: Buffer,
        required: false
    },

    fileName: {
        type: String,
        required: false
    },

    fileType: {
        type: String,
        required: false
    },

    fileSize: {
        type: Number,
        required: false
    }

当我使用 dummy.txt 文件进行测试时，Chrome 开发工具将响应 header 显示为：

HTTP/1.1 200 OK X-Powered-By: Express Content-Disposition: attachment; filename="dummyfile.txt" 内容类型：文本/纯内容长度：9 日期：2022 年 5 月 6 日星期五 20:19:01 GMT 连接：保持活动状态：超时 = 5

一个有趣的旁注：该文件确实下载到我的项目文件夹中并且一切正常，但它没有按应有的方式下载到我的 /downloads 文件夹中。

Answer 1

您应该使用 express 提供的res.download方法，无需设置任何标题。

另外，我正在使用 fs promises 模块来实现异步等待语法

const fs = require("fs").promises;

router.get("/:id/download", async (req, res) => {
  try {
    const bug = await Bug.findById(req.params.id);
    let buf = Buffer.from(bug.files);
    await fs.writeFile(bug.fileName,buf);

    res.download(bug.fileName, err => {
      if (err) {
        throw err;
      } else {
        // If download is complete
        if (res.headersSent) {
          // if you want to delete the file which was created locally after download is complete
          fs.rm(bug.fileName);
        }
      }
    });
  } catch (err) {
    console.log("error downloading file", err);
  }
});