将Imgur API与Angular4一起使用

我正在用angular开发一个web应用程序，但在使用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的方式不对，只是不知道该怎么做

有效负载也是一样，我应该如何声明它

---

谢谢你的帮助

多亏了pcarrara，我才能够找出问题所在

需要像这样声明标题：

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

var headers=新的头（{'authorization'：'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);


@ViewChild（'fileInput'）inputEl:ElementRef；
让inputEl:HTMLInputElement=this.inputEl.nativeElement；
this.file=inputEl.files.item（0）；

在这里发布解决方案，以防有人遇到同样的问题。：）
 您是否已验证是否确实发送了授权标头？如果没有，请转到“开发人员”面板（ctrl+shift+i），切换到“网络”选项卡并进行调用。查看“Headers”选项卡，找到您的请求并检查api调用的“request Headers”，它应该包含“Authorization”头。如果没有，则需要进行进一步的代码分析。如我所见，如果你有客户端id，你就可以对公共只读资源进行api调用。是的，授权没有被发送。已经修好了，非常感谢！