FileUploadModule ng2-file-upload 上传

最新推荐文章于 2024-11-13 13:01:43 发布

切儿

最新推荐文章于 2024-11-13 13:01:43 发布

阅读量367

点赞数

分类专栏： web

原文链接：https://www.cnblogs.com/gavin-cn/p/7256852.html

版权

web 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

web 文件上传方法分享，只用了需求需要的功能，其他的需求请查看参考文档。

1. 安装

安装非常简单，只要在项目根路径下运行如下npm命令即可:

npm install ng2-file-upload --save

2. 使用说明

官方的文档写的非常简单，几乎看不出什么来，这里结合实际的使用调试，说明一下基本的配置和使用方案。

2.1. 集成到Module中

在需要使用的Module中需要引入如下两个模块：

…
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';
…
@NgModule({
  …
  imports: [
    …
    CommonModule,
    FileUploadModule
    …
  ],
  …
})
export class ProjectDetailPageModule {}

2.2. 初始化FileUploader

在对应的使用的Component中，需要引入FileUploader：

import { FileUploader } from 'ng2-file-upload';

然后声明一个FileUploader类型的变量，并将其初始化：
这个方法建议放在初始化的时候定义，如果页面有多个下载的话，可重复使用。

uploader:FileUploader = new FileUploader({    
    url: commonConfig.baseUrl + "/uploadFile",  
    method: "POST",    
    itemAlias: "uploadedfile",
    autoUpload: false
});

2.2. FileUploader使用，

下面方法也可以写在初始化中。目前用的是这三种方法

  this.uploader.onSuccessItem = function(item: FileItem, response: string, status: number){
      
      // 上传文件成功
      if (status === 200) {
        // 上传文件后获取服务器返回的数据
        alert("上传成功");
      }else {
        // 上传文件后获取服务器返回的数据错误
        alert("上传失败");
      }
    }.bind(this);//this根据自己的需求
    this.uploader.onErrorItem = function (item: FileItem, response: string, status: number){
      
      alert("上传失败");
    };
    this.uploader.onAfterAddingFile = function(files: FileItem){
      const filename = files.file.name;//还有其他属性，可自行查看
      that.uploader.uploadItem(files);//可在其他地方调用
    }.bind(that);//that根据自己的需求

简单示例

html:

            <div class="form-group">
                <label class="col-md-3 control-label">
                  选择导入文件：
                </label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="filename" readonly/>
                </div>
                <div class="col-md-1">
                  <button class="btn btn-sm btn-default"  (click)='uploads()'>浏览</button>
                  <input type="file" id="file" style="display: none" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple/>
                </div>
              </div>

                <button type="button" class="btn blue"  (click)='certImport()'>确定</button>

ts:

 uploads():void{
    this.fileSize = 0;
    $("#file").click();
  }
  selectedFileOnChanged(event) {
    // 这里是文件选择完成后的操作处理
    this.fileItem = event;
    let fileName = "";
    let fileSize = 0;
   for(let i = 0;i<event.target.files.length;i++){
     fileName+= event.target.files[i].name + ";";
     fileSize +=  event.target.files[i].size;
   }
   $("#filename").val(fileName);
  }

  certImport():any{
    if( $("#filename").val() === ""){
      alert("请选择导入文件");
      return;
    }
    const size = this.fileSize/1024/1024;
    if(size>10){//判断文件 大小不能 超过10M
      alert("文件过大,请重新选择文件");
      return;
    }
    
    //上传文件
    that.uploader.uploadAll();
  }

文件功能是可上传文件的，可选择单个和多个。

更多属性和方法，可参考参考文档说明。

参考文档：
1. https://www.cnblogs.com/gavin-cn/p/7256852.html

2. http://fex.baidu.com/webuploader/doc/

3.https://www.cnblogs.com/xfdmb/p/6284899.html