Angular文件上傳及$http介紹

Angular中$http介紹

在angular.js 1.6版本之後，刪除了.success和.error方法，而使用.then。

此處基於Angular1的最後版本。

$http配置選項

$http(config).then()，根據官方文檔，常用的有以下配置選項：

• method → http請求的方法，如get/post。
• url → 類型爲string/trustedObject，如果是跨域url，需要使用$sce.trustAsResourceUrl(url)。
• params → 類型爲Object，angular會自動將其序列化作爲Get請求的參數。
• data → 類型爲string/Object，會作爲請求體數據被post發送。
• headers → 類型爲Object，可以設置請求頭相關參數。
• transformRequest → 類型爲函數，function(data,headerGetter)，用來將請求體和請求頭進行轉換包裝併發送。
• responseType → 指定響應消息的解析類型。

目前我用到的也就上面這些，如果有更多的需求請查閱官方文檔。

簡寫請求方式

Get

$http.get(url,[config]).then(function(res){}, function(err){});

如：

$http.get('/getData', {
    params:{a: 12, b:5},
    responseType: 'json' //可以自動解析傳輸過來的字符串爲對象、數字等
}).then(function(res){}, function(err){});

Post

$http.post(url, data, [config]).then(function(res){}, function(err){});

Jsonp

jsonp請求，有跨域url 的安全限制，詳情及解決請看官方文檔。

一個藉助jsonp接口數據模擬百度搜索框的例子：

angular.module('baidu',[]).controller('search',function($scope,$http,$sce){
    $scope.keyword = '';
    $scope.arr = [];
    $scope.$watch('keyword',function(){   
        $http.jsonp($sce.trustAsResourceUrl('http://suggestion.baidu.com/su'),{
        params:{wd:$scope.keyword},
        jsonpCallbackParam:'cb'
        }).then(function(json){
            console.log(json);
            $scope.arr = json.data.s;
        },function(err){
            console.log('失敗'+err);
        });

    });
});

Angular文件上傳

使用FormData異步提交

常用的表單提交編碼方式有兩種：multipart/form-data 和 application/x-www-form-urlencoded，如果是html頁面中的form表單上傳，可以使用enctype來指定編碼方式，不指定時默認是後者。

文件上傳必須使用multipart/form-data編碼方式的表單post提交，而如果需要異步上傳文件，則要使用FormData對象，如下：

$http({
    method: 'POST',
    url: '/myapp/api',
    headers: {
        'Content-Type': undefined //這裏很重要，需要取消post默認的Content-Type，否則後臺接收不到！
    },
    //angular提供的配置選項。在這裏將data數據轉換、包裝成FormData格式
    transformRequest: function(data) {
        var formData = new FormData();
        formData.append('id', data.id);
        formData.append('type', data.type);
        return formData;
    },
    //也可以在外面創建FormData對象，直接給data指定爲該對象
    data: {
        id: $scope.userId,
        type: $scope.infoType
    }
}).then((res)=>{}, (err)=>{});

angular-file-upload上傳文件

這個插件在比較大的項目中用起來會很方便，比如文件樹中文件的上傳。

當把angularFileUploader作爲依賴注入後，可以創建FileUploader對象：

$scope.material = {};
  var materialUploader = $scope.material.uploader = new FileUploader({
    url: fileManageService.uploadFile(), //需要上傳到的url地址
    formData: [{}],
    autoUpload: true,
    removeAfterUpload: true,
    withCredentials: true,
  });

  // CALLBACKS
  materialUploader.onAfterAddingFile = function (fileItem) {
    $scope.material.isUploaded = true;

  };

  materialUploader.onSuccessItem = function (fileItem, response, status, headers) {
    // 把結果追加到材料列表
    if (response && response.data) {
      $scope.material.children.push(response.data[0]);
      $scope.material.totalItems = $scope.material.children.length;
    } else {
      // $dialog.alert({
      //   'msg': '上傳材料出錯',
      //   'title': '出錯了'
      // });
    }
  };
  materialUploader.onErrorItem = function (fileItem, response, status, headers) {
    //提示錯誤
    // console.info('onErrorItem', fileItem, response, status, headers);
  };

  materialUploader.onCompleteAll = function () {
    //完成，做後續操作
    $scope.material.isUploaded = false;
    // init();
  };

同時需要給html頁面中的文件input標籤添加屬性：

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

詳請請看官方文檔。