Angular 2 - 如何在打字稿中使用 FileReader 从给定的 URL 读取文件？

Posted 2023-03-31

【中文标题】Angular 2 - 如何在打字稿中使用 FileReader 从给定的 URL 读取文件？

【英文标题】：Angular 2 - How to read the file from the given URL using FileReader in typescript?

【发布时间】：2017-08-24 08:56:43

【问题描述】：

我有 jenkins 构建，其中包含构建工件。工件包含一个文本文件。我想访问该文件并读取该文件。此文件包含一些版本标记。我想在 Angular 2 打字稿应用程序中显示此文件内容。

用于访问工件文件的 Jenkins REST API - http://localhost:8080/job/myjobname/job/develop/59/artifact/build/docker/myFileName.txt

只要我在浏览器中点击此 URL，它就会下载文本文件。

我只想在我的 Angular 2 打字稿应用程序中从这个给定的 URL 读取文件。如何使用 FileReader 从 URL 读取此文件？还有其他更好的方法吗？

【参考方案1】：

FileReader 只能读取 Blob（Blob 和子类 File 对象）。要读取URL，您可以使用新的fetch() 或经典的XMLHttpRequest()。您当然可以将内容请求为 blob，然后通过 FileReader 阅读，但如果内容是文本，则直接阅读更有意义。

通常CORS restriction 您也必须处理，除非 URL 指向与您的调用页面相同的来源。

【讨论】：

谢谢 :) 用 XMLHttpRequest() 试过了，我得到这个错误 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

@user1731770 这就是我在答案中提到 CORS 限制的原因。只需阅读链接中的要求 - 基本上，您需要设置服务器以允许跨域请求。