文章/答案/技术大牛

发布

社区首页 >问答首页 >将POST与HttpClient和Imgur API一起使用

问将POST与HttpClient和Imgur API一起使用
EN

Stack Overflow用户

提问于 2019-08-16 20:59:07

回答 1查看 129关注 0票数 0

我试图通过Imgur API使用POST上传图像，但我的代码似乎返回了一个FileList对象，因此在尝试上传文件时出现以下错误：

"Http failure response for https://api.imgur.com/3/upload?image=[object%20FileList]: 400 OK"

.html

<input
  type="file"
  accept="image/x-png,image/jpeg"
  (change)="startUpload($event)"
/>

.ts

startUpload(event) {
  this.imgurProvider.uploadImage(event.target.files);
}

provider.ts

uploadImage(file: any, data: any = {}): Promise<any> {
    return this._getOptions().then(options => {
      return this.http.post('https://api.imgur.com/3/upload?image=' + file, data, options).toPromise();
    });
  }

  private _getOptions(): Promise<any> {
    return this._getIdToken().then(token => ({
      responseType: 'json',
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Authorization': 'Client-ID ' + env.imgur.client_id
      })
    }));
  }

  currentUser(): firebase.User {
    return this.afAuth.auth.currentUser;
  }

  private _getIdToken(forceRefresh = false): Promise<string> {
    return this.currentUser().getIdToken(forceRefresh);
  }

期望的输出应该是文件本身，但我得到的是一个对象

如何让这段代码使用API上传文件？

angular

typescript

回答 1

Stack Overflow用户

发布于 2019-08-16 21:23:23

您遇到的问题是，您正在尝试构建一个字符串，而不是附加一个字符串，而是尝试附加一个javascript对象。

[object%20FileList]是类型为FileList的JavaScript对象的调试字符串，[object File]是类型为File的对象的调试字符串。我的假设是，您必须从file对象中获取文件的路径，这意味着您将需要执行以下操作：

let path = event.target.files[0].webkitRelativePath;

this.imgurProvider.uploadImage(path);

这是假设您接收的是this类型的文件对象，并且API期望得到文件路径。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57525122

复制

相似问题

问将POST与HttpClient和Imgur API一起使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将POST与HttpClient和Imgur API一起使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将POST与HttpClient和Imgur API一起使用
EN