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标签添加属性：

file-select="" uploader="material.uploader" type="file" >

详请请看官方文档。