将Imgur API与Angular4结合使用 [英] Use Imgur API with Angular4

问题描述

我正在开发一个使用angular的Web应用程序，但是在使用Imgur API时遇到了麻烦.我的目标是要有一个表单，用户可以选择它的照片，然后将其上传到imgur，然后将链接存储在存储图像的位置.

I am developing a web app with angular and I'm having trouble using Imgur API. My goal is to have a form where a user selects its photo and then I upload it to imgur and I store the link where the image was stored.

但是，我有两个问题:存储"图像的最佳方法是什么?目前，我正在使用"change"属性，并将其存储在此容器中:

However, I have two problems: what is the best way to "store" the image? Currently I'm using the "change" property and I'm storing it with this:

  this.file = event.srcElement.files

这是正确的方法吗?

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

Then I'm having trouble sending the image to the 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，只是不知道我该怎么做.

The server responds with 401 - unauthorized. I'm probably loading the client ID the wrong way, just don't know how I'm supposed to do it.

与有效载荷相同，我应该如何声明呢?

The same with the payload, how should I declare it?

谢谢您的帮助！

推荐答案

感谢pcarrara，我能够对出什么问题进行排序.

Thanks to pcarrara I was able to sort what was wrong.

需要这样声明标题:

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);

只需在此处发布解决方案，以防有人遇到相同的问题.:)

Just posting the solution here in case someone has the same problem. :)

这篇关于将Imgur API与Angular4结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！