将 Imgur API 与 Angular4 一起使用答案

【问题标题】：Use Imgur API with Angular4将 Imgur API 与 Angular4 一起使用
【发布时间】：2018-02-02 19:08:41
【问题描述】：

我正在开发一个带有 Angular 的网络应用程序，但我在使用 Imgur API 时遇到了问题。我的目标是有一个表单，用户可以在其中选择照片，然后我将其上传到 imgur，并存储存储图像的链接。

但是，我有两个问题： “存储”图像的最佳方式是什么？目前我正在使用“更改”属性并将其存储在此：

  this.file = event.srcElement.files

这是正确的方法吗？

然后我无法将图像发送到 API。

var headers = {'Authorization': 'Client-ID {{id-here}}'};
this.http.post(url, payload, headers)
                    .toPromise()
                    .then(response => {
                        console.log(response);
                        response.json() as string;
                    })
                    .catch(this.handleError);

服务器以 401 响应 - 未经授权。我可能以错误的方式加载客户端 ID，只是不知道该怎么做。

payload也是一样，应该怎么声明呢？

感谢您的帮助！

【问题讨论】：

您是否验证了授权标头是否真的被发送？如果没有，请转到开发人员面板（ctrl + shift + i），切换到“网络”选项卡并拨打电话。查看“标头”选项卡，找到您的请求并检查 api 调用的“请求标头”，它应该包含“授权”标头。如果不存在，则需要进行进一步的代码分析。
如果你还没有到达这里的 api 文档。 apidocs.imgur.com 如我所见，如果您有客户端 ID，您已经可以对公共只读资源进行 api 调用。
是的，没有发送授权。已经修好了，非常感谢！

标签： angular typescript imgur

【解决方案1】：

感谢 pcarrara，我能够对问题进行分类。

需要像这样声明标题：

var headers = new Headers({'authorization': 'Client-ID clientid'});

然后这样发送：

this.http.post(imgurl, photo, {headers: headers})

我使用

阅读照片

    <input type="file" name="image" id="image" #fileInput>

    @ViewChild('fileInput') inputEl: ElementRef;
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    this.file = inputEl.files.item(0);

只是在这里发布解决方案，以防有人遇到同样的问题。 :)

【讨论】：