Imgur API HTTP角色JS後的圖像

我的角色js代碼無法使用imgur API上傳圖像。角JS HTTP POST方法角JS HTTP POST方法Imgur API HTTP角色JS後的圖像

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被回調。

來源

2015-12-12 Alec Hewitt

錯誤是什麼？ – Gianmarco

@Gianmarco剛更新了它。沒有錯誤... –

我建議你：1.把一些控制檯日誌，而不是範圍變量，所以你有立即返回的值。 2.如果你使用業力（我希望如此）編寫一個單元測試，看看是否有其他服務被調用。 3.給我看所有的代碼，我想看看你是如何綁定控制器的。請先做第三個 – Gianmarco

我會改變你的代碼是這樣的：

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>

你是點擊按鈕而不是文本（這是能夠調用上傳功能的實際錨點）。

有了這個，我們至少應該能夠看到控制檯中的東西

來源

2015-12-13 00:49:03 Gianmarco

好的我得到了錯誤：Object {data：Object，狀態：400，配置：對象，狀態文本：「錯誤的請求」} –

好吧，現在你必須嘗試什麼是你應該發送的正確請求，也許你有一些params錯誤，我無法在我的系統中測試這個， 404 – Gianmarco

嘿這個問題實際上已經解決了，謝謝你的幫助。我會發布'修復'編輯。 –

已解決。原來，self.img是Imgur API的錯誤文件類型。必須轉換爲base64並進行編輯@Gianmarco建議

來源

2015-12-13 16:01:12

Imgur API HTTP角色JS後的圖像

回答

相關問題