无法通过我的前端从我的节点 js 服务器下载图像文件（我的后端和前端是分离的）

Question

我的 nodejs 后端在 localhost:8080 上是运行，前端在 localhost:8081 上使用 http-server，我无法将文件从服务器端下载到客户端，我是 node js 的新手，所以遇到了一些问题

我试过的

我在服务器端为我所需的文件创建了一个读取流，然后将其通过管道传输到 res object，我还设置了一些 headers :-

res.setHeader("Content-Type","image/png") // as I am trying to download a 
res.setHeader("Content-Disposition", `inline; filename=${filename}`);

但还是失败了

代码：-

从服务器端下载文件的代码

let filename = "hello.png";
let readStream = fs.createReadStream(path.join(__dirname, "..", chatDoc.chatContent));
res.setHeader("Content-Type", "image/png")
res.setHeader("Content-Disposition", `inline; filename=${filename}`);
readStream.pipe(res);

cors 代码：-

const cors = require("cors");
app.use(cors({
    origin: "http://localhost:8081",
    credentials: true,
    withCredentials: true
}))

前端代码：-

fetch("http://localhost:8080/downloadNow",{
    method:"POST",
    headers:{
      "Content-Type":"application/json"
    },
    body:JSON.stringify({
      chatId:chatId
    }),
    credentials:"include"
  })
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err);
  })

前端响应：- 我从服务器成功响应，但文件未下载。

请帮我解决这个问题

Answer 1

试试这个

服务器

let mime = {
  html: 'text/html',
  txt: 'text/plain',
  css: 'text/css',
  gif: 'image/gif',
  jpg: 'image/jpeg',
  png: 'image/png',
  svg: 'image/svg+xml',
  js: 'application/javascript'
};
app.post('/imageDownload', async(req, res) => {
  var type = mime[path.extname(req.body.imagePath).slice(1)] || 
  'text/plain';
  var s = fs.createReadStream(file);
  s.on('open', function () {
   res.set('Content-Type', type);
   s.pipe(res);
  });
  s.on('error', function (err) {
   console.log(err)
   res.send(err)
  });
}

客户

fetch(`/imageDownload`,{ 
   method: 'POST',
   headers:{
        "Content-Type":"application/json"
   },
   body:JSON.stringify({
      imagePath:url
   }),
 }).then(response => response.blob())
   .then(function(myBlob) {
        const url = window.URL.createObjectURL(new Blob([myBlob]));
         const link = document.createElement('a');
         link.href = url;
         link.setAttribute('download', "filename.jpg"); 
         document.body.appendChild(link);
         link.click();
  })

Answer 2

这是所有处理下载的服务器代码吗？如果是，则您没有等待 readStream 正确打开。当无法打开 readStream 时，您还应该添加适当的错误处理。使用

let readStream = fs.createReadStream(path.join(__dirname, "..", chatDoc.chatContent));
readStream.on("open", () => {
  res.setHeader("Content-Type","image/png")
  res.setHeader("Content-Disposition", `inline; filename=${filename}`);
  readStream.pipe(res);
})
readStream.on("error", e => {
  console.log(e);
  res.writeHead(400);
});

并使用 fetch 下载文件（在我的理解中，这意味着将文件保存到磁盘而不是在浏览器中显示）您仍然需要应用的方法。 ..

无法通过我的前端从我的节点 js 服务器下载图像文件（我的后端和前端是分离的）

Failed to download an image file from my node js server through my frontend (my backend and frontend are decoupled)

javascript

response

pipe

node.js

express

试试这个

服务器

客户