Angular.js中上传指令ng-upload的基本使用教程

下面是关于“Angular.js中上传指令ng-upload的基本使用教程”的完整攻略，具体说明如下：

什么是ng-upload

ng-upload是一个AngularJS的上传指令，能够帮助我们方便地实现文件上传功能。

安装和引入

安装

# 使用 bower 安装
bower install ng-file-upload

# 或者使用 npm 安装
npm install angular-file-upload

引入

在项目中引入ng-upload的代码，示例如下：

<script src="bower_components/ng-file-upload/ng-file-upload.min.js"></script>

基本使用教程

下面是基本的使用步骤：

第一步：创建一个AngularJS应用程序

这个应用程序需要引入ng-upload依赖，示例如下：

angular.module('myApp', ['ngFileUpload']);

第二步：在HTML中添加上传文件的表单

<div ng-controller="myCtrl">
  <form ng-submit="submit()" enctype="multipart/form-data">
    <input type="file" ngf-select ng-model="file" name="file" />
    <button type="submit">上传文件</button>
  </form>
</div>

第三步：在控制器中添加上传功能的代码

在控制器中，我们可以使用Upload服务来实现上传功能，上传的代码示例如下：

angular.module('myApp', ['ngFileUpload'])
    .controller('myCtrl', function($scope, Upload) {

      // 上传文件
      $scope.submit = function() {
        Upload.upload({
          url: '/api/upload',
          data: { file: $scope.file }
        }).then(function(resp) {
          console.log('上传成功:', resp.data);
        }, function(err) {
          console.log('上传失败');
        });
      };

    });

这就完成了一个简单的文件上传功能。在上面的代码中，我们使用Upload.upload方法去上传文件，其中url属性是服务器上传文件的地址，data属性指定要上传的文件。

两个示例说明

为了更好地理解ng-upload的用法，下面给出两个上传文件的实例：

示例1：上传图片

<div ng-controller="myCtrl">

  <form ng-submit="submit()" enctype="multipart/form-data">
    <input type="file" ngf-select ng-model="file" name="file" />
    <img ng-src="{{imgUrl}}" ng-show="imgUrl" />
    <button type="submit">上传图片</button>
  </form>

</div>

angular.module('myApp', ['ngFileUpload'])
  .controller('myCtrl', function($scope, Upload) {

    // 上传图片
    $scope.submit = function() {
      Upload.upload({
        url: '/api/upload',
        data: { file: $scope.file }
      }).then(function(resp) {
        console.log('上传成功:', resp.data);
        $scope.imgUrl = resp.data; // 回显图片
      }, function(err) {
        console.log('上传失败');
      });
    };

  });

示例2：上传Excel文件

<div ng-controller="myCtrl">

  <form ng-submit="submit()" enctype="multipart/form-data">
    <input type="file" ngf-select ng-model="file" name="file" accept=".xlsx, .xls" />
    <button type="submit">上传Excel文件</button>
  </form>

</div>

angular.module('myApp', ['ngFileUpload'])
  .controller('myCtrl', function($scope, Upload) {

    // 上传Excel文件
    $scope.submit = function() {
      Upload.upload({
        url: '/api/upload',
        data: { file: $scope.file }
      }).then(function(resp) {
        console.log('上传成功:', resp.data);
        // 处理Excel文件
        // ...
      }, function(err) {
        console.log('上传失败');
      });
    };

  });

在这两个示例中，我们均是通过在控制器中调用Upload.upload方法来上传文件，并使用ng-model指令来接收选中的文件。