角4图像上传

Question

我正试图通过角度上传一个图片到Imgur，而且对TypeScript来说还是个新手，不知道如何开始。

目前，我从文件选择器获得了以下代码的文件：

let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
let files: FileList = target.files;
let file: File = files[0];

现在，我需要使用file，并将它放入到Imgur请求的主体中。

请求的URL是https://api.imgur.com/3/image，它有一个授权客户端ID的头，然后是名为image的参数，它是一个二进制文件。

有人能告诉我如何用回调来写这样的请求吗？

https://apidocs.imgur.com/#4b8da0b3-3e73-13f0-d60b-2ff715e8394f

Answer 1

这是一个相当宽泛的问题，所以我只想达到最高点。当你遇到一个特定的问题时，请回来。

更新:我更多地研究了FormData API，并意识到它将接受一个File对象，这样您就可以跳过步骤1和步骤2。

1. 读一下文件。使用FileReader API。因为API与UI无关，所以不需要角度积分。您可以使用RxJS-DOM或promise-file-reader来集成承诺或可观察性(本机API是回调驱动的)，但您可以轻松地将其包装起来。
2. 选择你的格式。当#1完成时，您应该有一个ArrayBuffer (表示字节数组的原生javascript对象)。您可以直接发送该数据(imgur接受二进制数据)，也可以将其转换为BASE64。BASE64是一种将二进制数组表示为ASCII数据的方法，它可以使调试和可移植性变得更容易，而代价是使用大约1.3倍的字节。
3. 将图像提交给Imgur。要向Imgur发出一个简单的HTTP请求，您可以使用角Http服务，这非常容易。然而，Imgur期望一个多部分请求(在发送二进制有效负载和某种请求元数据时经常会看到这一点)，这有点复杂。这个问题描述了如何使用本机FormData API和角的Http服务发送多部分请求。
4. 在步骤3中，您需要确保HTTP具有正确的授权头。您可以手动完成此操作(您将注意到在我在步骤3中链接的答案中创建标题的部分，它创建了空的标题，但您可以提供自己的标题)。从我对Imgur文档的浏览来看，您似乎有两个选择。首先，您可以为匿名上传提供一个客户端ID。这是最简单的，如果这对你有用的话，我会建议你的。如果您需要将映像链接到用户帐户，那么您需要遵循OAuth 2.0工作流，在这种情况下，我建议您寻找一个与linked一起工作的库。