带有角度 JS 的 Imgur API http 发布图像答案

【问题标题】：Imgur API http post image with angular JS带有角度 JS 的 Imgur API http 发布图像
【发布时间】：2015-12-14 00:01:12
【问题描述】：

我的 Angular js 代码无法使用 imgur API 上传图像。 angular js http post方法 angular js http post方法

HTML：

<!doctype html>
<html ng-app="stalkcalibrator">
<head>
  <title>Corn Stalk Calibrator</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style/style.css"/>
  <script src="angular.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-controller="adminController">

  <h1 id="title">Calibrator - Admin Upload</h1>
  <!-- back to admin home -->
  <div id="back"><a href="admin.html">Admin Home</a></div>

  <!-- form used to upload one or more images -->
  <form>
    <!-- button allows user to browse local directory for image -->
    <!-- ng-model saves image var in array -->
    Upload image <input type="file" ng-model="img" accept="image/*" id="file" />

    <!-- executes js upload function with uploaded images -->
    <button><a ng-click="upload()">Submit</a></button>

    <p ng-model="num">{{num}}</p>

  </form>

</body>

</html>

这是我的 JS：

var stalkcalibrator = angular.module('stalkcalibrator', []);

stalkcalibrator.controller('adminController', function($scope){

  //array of data for each stalk. PULL FROM JSON FILE!
  $scope.stalks = [{id:1, name:2, thumbnail:3, note:4}, {id:9, name:10, thumbnail:11, note:12}, {id:5, name:6, thumbnail:7, note:8}];

  //array of image uploads
  $scope.img;

$scope.num = 1;

  function getStalks($scope){

  }

  $scope.upload = function() {
    $http({
        headers: {'Authorization': 'Client-ID 010fe699c18e3c9'},
        url: 'https://api.imgur.com/3/',
        type: 'POST',
        data: {'image': $scope.img}
    }).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.num = 2;
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    $scope.num = 3;
  });


    //adds image data to JSON file
    //_TODO_

  };

});

谢谢！

编辑：errorCallback 和 successCallback 都没有被回调。

【问题讨论】：

@Gianmarco 刚刚更新了它。没有错误...
我建议您： 1. 放置一些控制台日志而不是范围变量，这样您就可以立即返回值。 2. 如果你正在使用 karma（我希望如此），请编写一个单元测试来查看是否调用了其余服务。 3.给我看所有的代码，我想看看你是如何绑定控制器的。请先做第三个
用你的代码编辑你的问题，这样每个人都可以评估情况（记住总是尽可能丰富你的问题）

标签： javascript angularjs imgur

【解决方案1】：

我会像这样更改您的代码：

angular.module('stalkcalibrator', []) //best practise is not to declare a variable to contain this

.controller('adminController',['$scope','$log','$http', function($scope,$log,$http){ // safe dependency injection

    var self = this; //self will contain the data from the controller. I dislike to put all into the scope.
    //array of data for each stalk. PULL FROM JSON FILE!
    self.stalks = [{id:1, name:2, thumbnail:3, note:4}, {id:9, name:10, thumbnail:11, note:12}, {id:5, name:6, thumbnail:7, note:8}];

    //array of image uploads
    self.img;
    self.num = 1;

    self.getStalks = function($scope){};

    self.upload = function() {
        $http({
            headers: {'Authorization': 'Client-ID 010fe699c18e3c9'},
            url: 'https://api.imgur.com/3/',
            type: 'POST',
            data: {'image': self.img}
        }).then(function successCallback(response) {
            self.num = 2;
            $log.log('called and successful', response);
        }, function errorCallback(err) {
            self.num = 3;
            $log.log('called but error', err);
        });

    };
}]);

然后是html：

<body ng-controller="adminController as ac">

  <h1 id="title">Calibrator - Admin Upload</h1>
  <!-- back to admin home -->
  <div id="back"><a href="admin.html">Admin Home</a></div>

  <!-- form used to upload one or more images -->
  <form>
    Upload image <input type="file" ng-model="ac.img" accept="image/*" id="file" />

    <!-- executes js upload function with uploaded images -->
    <button ng-click="ac.upload()">Submit</button>

    <p ng-bind="ac.num"></p>
  </form>
</body>

试试这个，我想问题可能出在

<button><a ng-click="upload()">Submit</a></button>

您点击的是按钮而不是文本（那是能够调用上传功能的实际锚点）。

这样我们至少应该能够在控制台中看到一些东西

【讨论】：

好的，我得到了错误：Object {data: Object, status: 400, config: Object, statusText: "Bad Request"}
好的，现在你必须试试你应该发送的正确请求是什么，也许你有一些参数错误，我无法在我的系统中测试这个，我得到了 404
嘿，这个问题实际上已经解决了，感谢您的帮助。我将发布“修复”编辑。

【解决方案2】：

已解决。事实证明 self.img 是 Imgur API 的错误文件类型。必须转换为 base64 并根据@Gianmarco 的建议进行编辑

【讨论】：