angular2 ng2-file-upload上传示例代码


Posted in Javascript onAugust 23, 2018

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

ng2-file-upload文件上传

1、安装ng2-file-upload模块

npm install ng2-file-upload --save

2、如果使用systemjs打包,需要在配置systemjs.config.js文件

A、在System.config的map字段中的最后一行输入以下字段:

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

B、在System.config的packages字段中的最后一行输入:

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

3、在app.module.ts文件中,或者您有多个模块,在需要的模块中引入一下模块

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

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

@NgModule({
 imports: [
  CommonModule,
  FileUploadModule
 ]
}

4、在自定义的上传组件中使用ng2-file-upload

import {Component, OnInit} from "@angular/core";
// A: 引入FileUpload模块
import {FileUploader} from "ng2-file-upload";
@Component({
 selector: "my-file",
 templateUrl: "./app/file.html"
})
export class HomeFileComponent implements OnInit {
 // B: 初始化定义uploader变量,用来配置input中的uploader属性
 public uploader:FileUploader = new FileUploader({
  url: "http://localhost:3000/ng2/uploadFile",
  method: "POST",
  itemAlias: "uploadedfile"
 });
 // C: 定义事件,选择文件
 selectedFileOnChanged(event:any) {
  // 打印文件选择名称
  console.log(event.target.value);
 }
 // D: 定义事件,上传文件
 uploadFile() {
  // 上传
  this.uploader.queue[0].onSuccess = function (response, status, headers) {
   // 上传文件成功
   if (status == 200) {
    // 上传文件后获取服务器返回的数据
    let tempRes = JSON.parse(response);
   } else {
    // 上传文件后获取服务器返回的数据错误
    alert("");
   }
  };
  this.uploader.queue[0].upload(); // 开始上传
 }
}

5、对应的html内容

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" />
selectedFileOnChanged($event)在 .ts文件中定义

selectedFileOnChanged(event: any) {
 console.log(event.target.value);
}

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

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

6、拖拽上传文件

支持多文件拖拽上传

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

在对应的 .ts文件中定义拖拽函数

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

7、文件上传

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

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

详细介绍FileUpload

**初始化配置表**

参数名         参数类型    是否是可选值    参数说明
allowedMimeType    Array<string>  可选值  
allowedFileType    Array<string>  可选值  允许上传的文件类型
autoUpload       boolean     可选值  是否自动上传
isHTML5        boolean     可选值  是否是HTML5
filters        Array      可选值  
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的请求头

参考网站: https://valor-software.com/ng2-file-upload/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue实现扫码功能
Jan 17 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
JS实现的简单分页功能示例
Aug 23 #Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 #Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 #Javascript
You might like
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
python元组操作实例解析
2014/09/23 Python
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python如何读写json数据
2018/03/21 Python
Python中psutil的介绍与用法
2019/05/02 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Servlet方面面试题
2016/09/28 面试题
商场拾金不昧表扬信
2014/01/13 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
企业整改报告范文
2014/11/08 职场文书
教师教育教学随笔
2015/08/15 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技