Question

我试图通过Angular将图片上传到Imgur API并且是TypeScript的新手，并且不确定如何开始。

目前，我使用以下代码从文件选择器获取文件：

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

现在我需要取file并将其放入对Imgur API的POST请求的主体中。

请求的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步。 2。

阅读文件。使用FileReader API。由于API与UI无关，因此不需要Angular集成。您可以使用RxJS-DOM或promise-file-reader与promises或observables集成（本机API是回调驱动的），但您可以很容易地自己包装它。
选择您的格式。当＃1完成时，你应该有一个ArrayBuffer（本机javascript对象来表示一个字节数组）。您可以直接发送（imgur接受二进制数据）或将其转换为BASE64。 BASE64是一种将二进制数组表示为ASCII数据的方法，它可以使调试和可移植性更容易，但代价是使用大约1.3倍的字节。
将图片提交给Imgur。要向Imgur发出简单的HTTP请求，您可以使用Angular Http服务，这非常简单。但是，Imgur期望一个多部分请求（这通常在发送二进制有效负载以及某种请求元数据时出现），这有点复杂。 This question介绍了如何使用原生FormData API和Angular的Http服务发送多部分请求。
在第3步中，您需要确保您的HTTP POST具有正确的授权标头。您可以手动执行此操作（您将注意到在我在步骤3中链接的答案中创建标题的部分。它会创建空标题但您可以提供自己的标题）。从我对Imgur文档的一瞥看来，你有两个选择。首先，您可以为匿名上传提供客户端ID。这是最简单的，如果适合您，我会推荐它。如果您需要将图像链接到用户帐户，则需要遵循OAuth 2.0工作流程，在这种情况下，我建议您查找适用于Angular的库。

Angular 4 Imgur图片上传

1 个答案: