Imgur API http post 图片与 angular JS

Question

我的 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 都没有被回调。

Answer 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>

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

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

Answer 2

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

建议进行编辑

Imgur API http post 图片与 angular JS

Imgur API http post image with angular JS

javascript

angularjs

imgur