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

———————————————————————————————————————————————
原文链接：https://blog.csdn.net/longyin0528/article/details/81567529
详请请看官方文档 https://www.npmjs.com/package/angular-file-upload。