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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
语义化 H1 标签
Jan 14 Javascript
没有document.getElementByName方法
Aug 19 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
解决vue项目axios每次请求session不一致的问题
Oct 24 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
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
超级强大的表单验证
2006/06/26 Javascript
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python中文竖排显示的方法
2015/07/28 Python
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python add_argument()用法解析
2020/01/29 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
"引用"与多态的关系
2013/02/01 面试题
资料员岗位职责
2013/11/17 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年工程师工作总结
2014/11/25 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python