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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
Apr 25 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
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查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP5.3新特性小结
2016/02/14 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
chrome原生方法之数组
2011/11/30 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
2014/01/13 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
用vue写一个日历
2020/11/02 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
详解Python模块化编程与装饰器
2021/01/16 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
电子装配专业毕业生求职信
2014/04/23 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
灵山大佛导游词
2015/02/04 职场文书
工作保证书怎么写
2015/02/28 职场文书
使用Redis做预定库存缓存功能
2022/04/02 Redis