Utiliser Imgur API avec Angular4

Je développe une application web avec angular et j'ai du mal à utiliser Imgur API. Mon but est d'avoir un formulaire où un utilisateur sélectionne sa photo puis je la télécharge sur imgur et je stocke le lien où l'image a été stockée.Utiliser Imgur API avec Angular4

Cependant, j'ai deux problèmes: quelle est la meilleure façon de "stocker" l'image? Actuellement, je suis en utilisant la propriété « changement » et je le stockage avec ceci:

this.file = event.srcElement.files

Est-ce la bonne façon? Puis, j'ai des problèmes pour envoyer l'image à l'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);

Le serveur répond avec 401 - non autorisé. Je suis probablement en train de charger l'ID client dans le mauvais sens, je ne sais pas comment je suis censé le faire. La même chose avec la charge utile, comment dois-je le déclarer?

Nous vous remercions de votre aide!

Source

2017-08-24 Caramelo

Avez-vous vérifié si l'en-tête Authorization est vraiment envoyé? Si ce n'est pas le cas, allez dans le panneau des développeurs (ctrl + shift + i), passez à l'onglet 'Réseau' et faites l'appel. Regardez dans l'onglet "En-têtes", trouvez votre requête et inspectez les 'En-têtes de requête' de l'appel API, il devrait contenir l'en-tête 'Autorisation'. Si ce n'est pas le cas, une analyse de code supplémentaire doit être effectuée. – pcarrara

Si vous n'avez pas encore atteint la documentation api, c'est ici. https://apidocs.imgur.com/ Comme je peux le voir, si vous avez l'identifiant du client, vous pouvez déjà faire des appels API aux ressources publiques en lecture seule. – pcarrara

Oui, l'autorisation n'a pas été envoyée. Déjà réparé, merci beaucoup! – Caramelo

Grâce à pcarrara, j'ai pu trier ce qui n'allait pas.

nécessité de déclarer les en-têtes comme ceci:

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

Envoyez ensuite comme ceci:

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

Je lis la photo à l'aide

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

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

affichage Juste la solution ici au cas où quelqu'un a le même problème. :)

Source

2017-08-27 22:45:17 Caramelo

Utiliser Imgur API avec Angular4

Répondre

Questions connexes