Angular2使用ng2-file-upload上传文件-白红宇

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

阅读量：6688 次

发布时间：2019-06-25

本文共 9736 字，大约阅读时间需要 32 分钟。

html页面

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
    
      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-uploader。ng2-uploader是一个轻便的上传文件的支持库，功能较弱，而ng2-file-upload是一个功能比较全面的上传文件的支持库。这里主要介绍一下ng2-file-upload的使用。

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

1. 安装

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

sudo npm install ng2-file-upload --save

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

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

在System.config的packages字段中的最后一行输入：

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

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

2. 使用

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

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

然后在@NgModule的imports字段中引用CommonModule和FileUploadModule。

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

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

初始化FileUploader：

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

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

|:---- --:|:--------:|:-------------:|:--------:|

| url | string | 可选值 | 上传地址 |

2.1 选择文件

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

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

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

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

2.2 拖拽文件

拖拽文件默认支持多文件拖拽。

对块级元素进行设置（这里以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(); // 开始上传