Angular2使用ng2-file-upload上传文件

html页面

<div class="col-md-4">
                                <a href="javascript:;" class="file_input" style="display:none">
                                    <input type="file" id="file"  ng2FileSelect [uploader]="uploader_yingyezhizhao" required (change)="selectedFileOnChanged($event)" />
                                </a>	
                                <button type="button" style="float:left;width:110px; line-height:36px; color:#fff; margin-right:50px; border-radius:4px; background:#f4af2b;" onclick="document.getElementById('file').click();">
                                    点击上传
                                </button>
                                <img *ngIf="yyLicense!=''" [src]="yyLicense" width="120px" height="100px" (click)="showimageDetail(1)"  style="display: inline"/>
                           </div>

1、上传文件的地址

引用的包

import { FileSelectDirective, FileDropDirective, FileUploader, FileUploaderOptions } from 'ng2-file-upload';

public baseUrl = 'http://127.0.0.1:8080/test/';

public uploadUrl=this.http.baseUrl+"test/upload";

2、 //上传的方法

    public uploader: FileUploader = new FileUploader({
        url: this.uploadUrl,
        method: "POST",
        itemAlias: "uploadok",
        filters: [{
            name: "", fn: (item): any => {
                var numer = item.size
                if (numer > 1048576) {

                    //文件格式大小限制
                    this.http.showAlert("提示", "请上传小于1M的文件", "确定", "", "", false);
                    return false
                }

                //文件类型限制
                var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
                let temp = '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
                if (!temp) {
                    this.Flagyingyezhizhao = false
                    this.http.showAlert("提示", "请上传格式为jpg、png、jpeg、bmp、gif的文件", "确定", "", "", false);

                } else {
                    this.Flagyingyezhizhao = true;
                }
                return temp;
            }
        }]
    });

3、 //上传方法执行

 thiss.uploader.queue[this.uploader.queue.length - 1].onSuccess = function (response, status,    headers) {
                // 上传文件成功
                if (JSON.parse(response).stateCode== 200) {
                    // 上传文件后获取服务器返回的数据
                    let tempRes = JSON.parse(response);
                    thiss.yyLicense=tempRes.data;       
                   
                } else {
                    // 上传文件后获取服务器返回的数据错误
                    thiss.http.showAlert("提示", "组织代码证上传失败,请重新上传", "确定", "", "", false);
                }
            };
  thiss.uploader.queue[this.uploader.queue.length - 1].upload(); // 开始上传

//显示图片

thiss.uploader.onAfterAddingFile = (fileItem) => {
this.yyLicense = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
        }

4、//后台方法

   @RequestMapping(method = RequestMethod.POST, value = "upload")
    public Object UploadFile(MultipartHttpServletRequest requestFile) throws IllegalStateException, IOException {
        DataState dataState = new DataState();
        HttpServletRequest request = WebContext.getServletRequest();
        UserEntity user = WebContext.getUserEntity();
        Iterator<String> itr = requestFile.getFileNames();
        requestFile.setCharacterEncoding("utf-8");
        MultipartFile file = requestFile.getFile(itr.next());

        // 转换成File
        CommonsMultipartFile cf = (CommonsMultipartFile) file;
        DiskFileItem fi = (DiskFileItem) cf.getFileItem();
        File f = fi.getStoreLocation();

        String fileName = file.getOriginalFilename();
        System.out.println(fileName);
        // 自定义的文件名称
        String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName;
        String time = new SimpleDateFormat("yyyyMMdd").format(new Date());
        // 设置存放图片文件的路径
        String filePath="/app/test/"+time;

        // String
        path=realPath+System.getProperty("file.separator")+trueFileName;
        System.out.println("存放图片文件的路径:" + filePath);
        // 转存文件到指定的路径
         file.transferTo(new File(path));
        WebContext.getSession().setAttribute("url", url);
        dataState.setStateCode(StateCode.OPT_OK);
        dataState.setData(url);
        return DataEvent.wrap("uploadok", dataState);

    }

仅供参考

附上一个完整的文档

Angular2中有两个比较好用的上传文件的第三方库,一个是ng2-file-upload,一个是ng2-uploaderng2-uploader是一个轻便的上传文件的支持库,功能较弱,而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。

以下以Mac OS操作系统介绍。

1. 安装

使用npm安装即可。在项目中打开“终端”,运行命令:

sudo npm install ng2-file-upload --save

如果是以systemjs的方式打包,安装完成后需要打开systemjs.config.js文件,在System.configmap字段中的最后一行输入以下字段:

'ng2-file-upload':            'npm:ng2-file-upload'

System.configpackages字段中的最后一行输入:

'ng2-file-upload': {    
    main: 'index.js',    
    defaultExtension: 'js'
}

之后便可以在项目中使用了。

2. 使用

在需要用到的模块中引用模块:

import { CommonModule }     from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';

然后在@NgModuleimports字段中引用CommonModuleFileUploadModule

在对应需要使用的组件内引用:

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

初始化FileUploader

uploader:FileUploader = new FileUploader({    
    url: "http://www.download.com:80/uploadFile",   
    method: "POST",    
    itemAlias: "uploadedfile"
});

初始化FileUploader需要传入FileUploaderOptions类型的参数:

| 参数名 | 参数类型 | 是否是可选值 | 参数说明 | |:---- --:|:--------:|:-------------:|:--------:| | allowedMimeType | Array<string> | 可选值 | | | allowedFileType | Array<string> | 可选值 | 允许上传的文件类型 | | autoUpload | boolean | 可选值 | 是否自动上传 | | isHTML5 | boolean | 可选值 | 是否是HTML5 | | filters | Array<FilterFunction> | 可选值 | | | headers | Array<Headers> | 可选值 | 上传文件的请求头参数 | | method | string | 可选值 | 上传文件的方式 | | authToken | string | 可选值 | auth验证的token | | maxFileSize | number | 可选值 | 最大可上传文件的大小 | | queueLimit | number | 可选值 | | | removeAfterUpload | boolean | 可选值 | 是否在上传完成后从队列中移除 | | url | string | 可选值 | 上传地址 | | disableMultipart | boolean | 可选值 | | | itemAlias | string | 可选值 | 文件标记/别名 | | authTokenHeader | string | 可选值 | auth验证token的请求头 |

2.1 选择文件

在组件对应的HTML模版中设置input标签:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />

在组件.ts文件中设置声明函数:

selectedFileOnChanged() {
    // 这里是文件选择完成后的操作处理
}

选择文件默认支持选择单个文件,如需支持文件多选,请在标签中添加multiple属性,即:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

2.2 拖拽文件

拖拽文件默认支持多文件拖拽。 对块级元素进行设置(这里以div标签为例):

<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

在组件.ts文件中设置声明函数:

fileOverBase(event) {
    // 拖拽状态改变的回调函数
}
fileDropOver(event) {
    // 文件拖拽完成的回调函数
}

2.3 文件上传

FileUploader有个数组类型的属性queue,里面是所有拖拽的和选择的文件,只要操作这个属性便可以进行文件上传。

this.uploader.queue[0].onSuccess = (response, status, headers) => {    
    // 上传文件成功   
    if (status == 200) {
        // 上传文件后获取服务器返回的数据
        let tempRes = JSON.parse(response);        
    }else {            
        // 上传文件后获取服务器返回的数据错误        
    }
};
this.uploader.queue[0].upload(); // 开始上传

3. FileUploader详解

FileUploader是ng2-file-upload最主要的部件,里面包含了所有对文件的处理。

3.1 属性详解

  • isUploading:[boolean] 是否正在上传文件中。
  • queue:[array<FileItem>] 已经拖拽或选择的所有文件。
  • progress:[number] 所有的上传文件的整体进度。
  • options:[FileUploaderOptions] 上传文件的配置信息,前面已经介绍过。

3.2 方法详解

  • setOptions(options: FileUploaderOptions): void; 设置上传文件的配置信息。
  • addToQueue(files: File[], options?: FileUploaderOptions, filters?: FilterFunction[] | string): void; 手动添加文件到FileUploader的上传队列中。
  • removeFromQueue(value: FileItem): void;FileUploader的上传队列中移除指定文件。
  • clearQueue(): void; 清除FileUploader上传队列中的所有文件。
  • uploadItem(value: FileItem): void; 上传指定文件。
  • cancelItem(value: FileItem): void; 取消指定文件的上传。
  • uploadAll(): void; 上传FileUploader的上传队列中的所有文件。
  • cancelAll(): void; 取消FileUploader的上传队列中的所有文件的上传。
  • isFile(value: any): boolean; 判断是否是文件。
  • getIndexOfItem(value: any): number; 获取文件在FileUploader上传队列中的位置。
  • getNotUploadedItems(): Array<any>; 获取FileUploader上传队列中的所有未上传的文件。
  • getReadyItems(): Array<any>; 获取FileUploader上传队列中的所有准备上传的文件。
  • destroy(): void; 销毁FileUploader实例。

3.3 监听详解

  • onAfterAddingAll(fileItems: any): any; 添加完所有文件之后的回调 返回:
  • fileItems - 添加的文件的数组
  • onBuildItemForm(fileItem: FileItem, form: any): any; 创建文件之后的回调 返回:
  • fileItem - 创建的文件
  • form - 添加的方式
  • onAfterAddingFile(fileItem: FileItem): any; 添加一个文件之后的回调 返回:
  • fileItem - 添加的文件
  • onWhenAddingFileFailed(item: FileLikeObject, filter: any, options: any): any; 添加文件失败的回调 返回:
  • item -
  • filter -
  • options -
  • onBeforeUploadItem(fileItem: FileItem): any; 要上传文件之前的回调 返回:
  • fileItem - 将要上传的文件
  • onProgressItem(fileItem: FileItem, progress: any): any; 上传文件的进度(开始上传后调用非常频繁) 返回:
  • fileItem - 正在上传的文件
  • progress - 该文件的上传进度
  • onProgressAll(progress: any): any; 整体的上传进度的回调(开始上传后调用非常频繁) 返回:
  • progress - 整体的上传文件的进度
  • onSuccessItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any; 上传一个文件成功的回调 返回:
  • item - 上传成功的文件
  • response - 上传成功后服务器的返回
  • status - 状态码
  • headers - 上传成功后服务器的返回的返回头
  • onErrorItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any; 上传一个文件错误的回调 返回:
  • item - 上传错误的文件
  • response - 返回的错误
  • status - 状态码
  • headers - 返回的错误返回头
  • onCancelItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any; 取消上传一个文件的回调 返回:
  • item - 取消上传的文件
  • response - 取消的返回信息
  • status - 状态码
  • headers - 取消的返回信息的返回头
  • onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any; 完成上传一个文件的回调 返回:
  • item - 上传成功的文件
  • response - 上传成功后服务器的返回
  • status - 状态码
  • headers - 上传成功后服务器的返回的返回头
  • onCompleteAll(): any; 完成上传所有文件的回调

4. FileItem详解

FileItemFileUploaderqueue属性的元素类型,在FileUploader中存储的文件的基本类型。

4.1 属性详解

  • alias [string] : 上传的标志/别名。
  • url [string] : 地址。
  • method [string] : 上传的方法。
  • headers [any] : 上传的头部参数。
  • withCredentials: [boolean] : 是否使用证书。
  • formData [any] : 格式化数据?
  • isReady [boolean] : 是否准备上传(是否可以上传)。
  • isUploading [boolean] : 是否正在上传。
  • isUploaded [boolean] : 是否已经上传过。
  • isSuccess [boolean] : 是否上传成功。
  • isCancel [boolean] : 是否取消上传。
  • isError [boolean] : 是否上传错误。
  • progress [number] : 上传进度。
  • index [number] : 在队列中的位置。

4.2 方法详解

  • upload(): void; 开始上传这个文件。
  • cancel(): void; 取消上传这个文件。
  • remove(): void; 将这个文件从上传队列中移除。

4.3 监听详解

  • onBeforeUpload(): void; 开始上传之前的回调函数。
  • onBuildForm(form: any): any; 创建文件的回调函数。 返回:
  • form - 文件来源。
  • onProgress(progress: number): any; 上传文件的进度回调函数。 返回:
  • progress - 上传文件的进度。
  • onSuccess(response: string, status: number, headers: ParsedResponseHeaders): any; 上传文件成功的回调函数。 返回:
  • response - 成功后的回调数据
  • status - 状态码
  • headers - 回调数据的返回头
  • onError(response: string, status: number, headers: ParsedResponseHeaders): any; 上传文件错误的回调函数。
  • onCancel(response: string, status: number, headers: ParsedResponseHeaders): any; 取消上传的回调函数。
  • onComplete(response: string, status: number, headers: ParsedResponseHeaders): any; 上传文件完成的回调函数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏深度学习自然语言处理

【一分钟知识】七种损失函数

0-1, Hinge, Logistic, Cross Entropy, Square, Absolute, Huber

9820
来自专栏小詹同学

用 Python 告诉你!最近 24 小时内朋友圈发生了什么

之前有一篇 文章 使用 Airtest 实现自动看新闻薅羊毛这一操作,其实 Airtest 功能远不止此。

15720
来自专栏Java技术栈

Java 中的 String 真的是不可变的吗?

我们都知道 Java 中的 String 类的设计是不可变的,来看下 String 类的源码。

6630
来自专栏Java技术栈

sleep( ) 和 wait( ) 的这 5 个区别,你知道几个?

sleep(休眠) 和 wait(等待) 方法是 Java 多线程中常用的两个方法,它们有什么区别及一些该注意的地方有哪些呢?下面给大家一一分解。

8640
来自专栏深度学习自然语言处理

最新语言表示方法XLNet

近期,由卡耐基梅隆大学和谷歌大脑提出的全新 XLNet 在 20 个任务上超过了 BERT 的表现,而且还开放了源码,今天我们来讨论一下这篇论文。

14450
来自专栏灯塔大数据

学术大讲堂 | (七)如何应用大数据技术秒杀一个貌似不可能的任务

今天我将介绍大范围高精度栅格可视化方案。它是结合大数据技术解决实际应用问题的一个典型例子,我们给它起了个大标题,叫做“如何应用大数据技术秒杀一个貌似不可...

10610
来自专栏AI科技大本营的专栏

一文全面了解基于内容的推荐算法

这篇文章我们主要关注的是基于内容的推荐算法,它也是非常通用的一类推荐算法,在工业界有大量的应用案例。

59030
来自专栏Java技术栈

深入浅出 Java 中的包装类

前阵子,我们分享了《Java中的基本数据类型转换》这篇文章,对许多粉丝还是有带来帮助的,今天讲一下 Java 包装类的的由来,及自动装箱、拆箱的概念和原理。

13030
来自专栏Java技术栈

正则表达式真的很骚,可惜你不会写!

正则表达式在几乎所有语言中都可以使用,无论是前端的JavaScript、还是后端的Java、c#。他们都提供相应的接口/函数支持正则表达式。

8030
来自专栏Java技术栈

一文搞懂 Java 线程中断

在之前的一文《如何"优雅"地终止一个线程》中详细说明了 stop 终止线程的坏处及如何优雅地终止线程,那么还有别的可以终止线程的方法吗?答案是肯定的,它就是我们...

11040

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励