Angular angular-file-upload 入坑记

昌招

2023-12-01

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

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就是后台传来的数据，这个参数比较重要

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

Angular angular-file-upload 入坑记

相关阅读

相关文章

相关问答

相关文档