使用 AngularJS 将图像上传到 Imgur

Question

我正在尝试使用 Imgur 的 API 上传图片。我想让我的代码尽可能简单，所以我尝试使用 angular-file-upload 指令。

我已经设置了使用标签的指令并将请求提交给 API，网址为：

https://api.imgur.com/3/image

HTML 看起来像这样：

<input type="file" nv-file-select="" uploader="uploader">

在控制器内部我这样做：

$scope.uploader = new FileUploader({
    url: 'https://api.imgur.com/3/image',
    headers: {
        Authorization: 'Client-ID XXXXXXXXXXXXXXX',
    },
    autoUpload: true
});

我面临的问题是 Imgur API 期望接收 header 中 "image" 字段中的文件作为二进制文件或 base64 数据，但是浏览器似乎在 POST 请求的 body 中发送文件。

我一直在尝试让指令改为在 header 中发送文件，但我找不到执行此操作的方法。一种使用 angular-file-upload 指令或另一种简单的实现方法来解决此问题的方法将不胜感激。

一个要求是我需要提供上传状态的反馈：上传百分比、成功、错误和错误原因。

Answer 1

我找到了这个问题的简单答案。

为angular-file-upload 指令创建FileUploader 对象的实例时，必须指定alias 选项来更改文件数据所在的表单字段的名称包括从默认 file 到 Imgur 期望的名称：image.

$scope.uploader = new FileUploader({
    url: 'https://api.imgur.com/3/image',
    alias: 'image',
    headers: {
        Authorization: 'Client-ID XXXXXXXXXXXXXXX',
    },
    autoUpload: true
});

使用 AngularJS 将图像上传到 Imgur

Uploading image to Imgur using AngularJS

javascript

angularjs

imgur