Angular angular-file-upload 入坑记

系统管理员 2022-07-15 11:18 112阅读 0赞

我们写网站呢 上传功能几乎是一定会用到的，这是一个灰常使用的插件，而且操作简单，非常容易使用，老规矩还是放一下API，走运的是，这个插件的API并不需要翻墙也看得到哦~

> [https://github.com/nervgh/angular-file-upload][https_github.com_nervgh_angular-file-upload]

进入正题，我们如何安装，还是老样子安利波npm

npm install angular-file-upload

我们如何在项目中使用它呢  
一个简单的官网上的例子

<div ng-app="app">
        <div ng-controller="AppController">
            <input type="file" nv-file-select uploader="uploader"/><br/>
            <ul>
                <li ng-repeat="item in uploader.queue">
                    Name: <span ng-bind="item.file.name"></span><br/>
                    <button ng-click="item.upload()">upload</button>
                </li>
            </ul>
        </div>
    </div>

angular
        .module('app', ['angularFileUpload'])
        .controller('AppController', function($scope, FileUploader) { 
            $scope.uploader = new FileUploader();
        });

我们来看一下html`<input type="file" nv-file-select uploader="uploader"/><br/>`  
前面的file是input上传时用的特殊type，`nv-file-select` 是上传的样式，这个是最近基本的文件上传，还有`nv-file-over`这个是拖动到指定位置上传 `nv-file-drop`这个你直接把文件拖进网页就可以上传。  
至于后面的`uploader="uploader"`这个也是必填的 ，这个是我们实例一个上传实例，你可以看到我们的controller有`$scope.uploader = new FileUploader();`这就是实例一个上传，我们前台得到这个实例，然后操作。  
这里面介绍的两个属性是必须的，还有两个可选属性`options="{Object}" filters="{String}"`  
options我没看的太明白，好像也没用到，filters这个过滤器比较有用。例如举个例子，我们限制上传数量

uploader.filters.push({
            name: 'customFilter',
            fn: function(item, options) { 
                return this.queue.length < 10;
            }
        });

我们过滤器的名字是customFilter 方法执行子fn里 queue是文件上传实例也就是uploader的属性，下面就介绍有哪些属性，不是全部的属性，官网又全部的属性，不是很多也，这里介绍我用过的  
有些属性是只读的，无法修改`progress` `isHTML5 isUploading` 分别是上传数据的百分比是一个数值，是否是H5的上传 最后一个是是否在上传。 在官网上看的时候需要注意他的类型，`queue`就是array数组类型意思是我们的上传队列 `removeAfterUpload` 是否在上传完后是否从队列里删除 `url` 上传服务器的路径，这个是一定要用到的 。`autoUpload`当文件放入队列中是否自动上传。其他的属性可以从官网上查到  
用法

var uploader = $scope.uploader = new FileUploader({
            url: 'http://localhost:8080/服务器',
        });

再就是一些自带的方法，官网上分为两类，一个是上传实例对象的方法，一个是上传文件的方法，我们第一个代码`item.upload()`这就是上传文件的方法。因为是上传文件调用的，而不是uploader实例的方法，这个要搞清楚了。

ng-click="uploader.uploadAll()"//这就是全部上传方法调用时用的是uploader里的，这就是实例方法

先介绍一些实例方法，`clearQueue`清除上传队列，`uploadAll`全部上传 `cancelAll`全部取消  
其他的可以自行 试一下，我用的不多

文件方法`remove` `upload` `cancel`就这三个。删除上传取消，这个比较简单  
文件的属性，也都很好理解，我用的不是很多，大部分是一些只读属性，看看文件是很么状态  
类似`isUploading` `isUploaded` `isSuccess` `isCancel` `isError` `uploader`最后一个是必要说的，这个是调用父亲的引用，用来通信的。

再就是实例的回调函数和文件的回掉函数，方法的意思差不多都，先介绍实例的回调函数

uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) { 
            console.info('onWhenAddingFileFailed', item, filter, options);
        };
        uploader.onAfterAddingFile = function(fileItem) { 
            console.info('onAfterAddingFile', fileItem);
        };
        uploader.onAfterAddingAll = function(addedFileItems) { 
            console.info('onAfterAddingAll', addedFileItems);
        };
        uploader.onBeforeUploadItem = function(item) { 
            console.info('onBeforeUploadItem', item);
        };
        uploader.onProgressItem = function(fileItem, progress) { 
            console.info('onProgressItem', fileItem, progress);
        };
        uploader.onProgressAll = function(progress) { 
            console.info('onProgressAll', progress);
        };
        uploader.onSuccessItem = function(fileItem, response, status, headers) { 
            console.info('onSuccessItem', fileItem, response, status, headers);      
        };
        uploader.onErrorItem = function(fileItem, response, status, headers) { 
            console.info('onErrorItem', fileItem, response, status, headers);
        };
        uploader.onCancelItem = function(fileItem, response, status, headers) { 
            console.info('onCancelItem', fileItem, response, status, headers);
        };
        uploader.onCompleteItem = function(fileItem, response, status, headers) { 
            console.info('onCompleteItem', fileItem, response, status, headers);
        };
        uploader.onCompleteAll = function() { 
            console.info('onCompleteAll');
        };

这里面有response参数的这个response就是后台传来的数据，这个参数比较重要

文件的方法基本和这个雷同，去官网一看就基本能明白。今天就总结到这了，以后用上传再用到什么比较有用的地方，再补充。。。~~~~

[https_github.com_nervgh_angular-file-upload]: https://github.com/nervgh/angular-file-upload