【问题标题】:How to return files saved on a file system with Node js and Multer to angular front-end?如何使用 Node js 和 Multer 将保存在文件系统上的文件返回到 Angular 前端?
【发布时间】:2018-10-28 04:38:31
【问题描述】:

我是使用 angular 和 node js 编程的新手,我需要将保存在文件系统中的文件(由 node js 中的后端处理)返回到前端,以便用户选择查看或下载它们,为了保存它们,我使用了 multer 中间件,但是为了将它们带回前端,我没有找到有效的解决方案。 我尝试使用 fs 创建一个缓冲区数组,但没有成功。 有人知道有效的解决方案吗?

在请求中将传递参数以确定返回哪个文件,但现在我正在使用静态文件进行测试。

我的要求:

let headers: Headers = new Headers(); 
headers.append('Content-type', 'application/json'); 
headers.append('Authorization', token); 
let link = ${URL_AuthAPI}/systemUsers/list; 

let body = JSON.stringify({ obj }); 
let option = new RequestOptions({ headers: headers }); 
return this.http.post(link, body, option).map((resposta: Response)=> resposta);

Nodejs 服务器:

var filePath = path.join("/home", 'rg.png');
  var stat = fileSystem.statSync(filePath);

    res.writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': stat.size,
        // 'Content-Disposition': 'attachment ; filename=teste.png'
    });

    var readStream = fileSystem.readFileSync(filePath);

    readStream.on('data', function(data) {
    response.write(data);
});

readStream.on('end', function() {
    response.end();        
});

组件代码:

this.systemUsersService.listUsers(this.token, null).subscribe((apiResponse) => {

      var data = apiResponse['_body'];
      console.log(data);

    }, (error: any) => {

    }
    );

【问题讨论】:

  • 欢迎来到 Stack Overflow!您可能想要更具体一点,并可能显示一些您正在尝试做什么的代码?我很困惑:您需要返回文件还是文件列表?是否需要递归(遍历目录?)是否需要保留目录格式?
  • 谢谢。它不必是递归的,我需要返回一个列表,以防我一次无法返回一个文件。目的是将它们返回到 html,以便用户可以下载他上传的文件。
  • 起初我测试了这段代码:stackoverflow.com/questions/10046039/…,但它返回了 pastebin.com/3bcUWX7A 类型的东西屏幕上的文件,因为我正在做一个 post 类型的请求,我不知道如何处理这个字符串。
  • 最好在您的问题中添加代码。我已经为你添加了。但也许你可以多填写一点?
  • 我已添加代码

标签: javascript node.js angular file multer


【解决方案1】:
  • 如果您希望允许用户下载的文件是公开的,那么最好的选择是(从您的后端)将文件 url 数组发送到 Angular 应用程序,(如果要从前端创建正确的图像)
  • 如果您想使用节点下载图像,您可以在执行“发送”之前读取文件 (fs.createReadStream) 并发送正确的标头。看看Nodejs send file in response这是一个非常好的答案
  • 最后,我个人的建议是“不要使用node发送文件”,可以使用nginx发送静态内容

【讨论】:

  • 感谢您的帮助,但现在我遇到了上面评论中引用的问题我不知道如何处理该方法返回的可读字符串,我尝试生成一个 blob 甚至转换到base64,但它不起作用。我正在寻找是否能找到更多选择。
  • 欢迎。在您的情况下,您不需要对可读流进行太多工作,只需将其发送到前端,添加我指示的标题并使用方法管道“流式传输”图像对象(如您所知,可读流)并传递表达响应对象。查看文档以了解它:nodejs.org/api/…
猜你喜欢
  • 2021-05-16
  • 2018-05-05
  • 2021-07-25
  • 2021-08-29
  • 1970-01-01
  • 2016-10-18
  • 2021-11-27
  • 2017-10-10
  • 2018-08-01
相关资源
最近更新 更多