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 相关文章推荐
jquery $(document).ready() 与window.onload的区别
Dec 28 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
javascript的内存管理详解
Aug 07 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
详解es6新增数组方法简便了哪些操作
May 09 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中使用Oracle数据库(6)
2006/10/09 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
PHP中phar包的使用教程
2017/06/14 PHP
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
实习自我鉴定模板
2013/09/28 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
税务干部鉴定材料
2014/02/11 职场文书
2014年人事科工作总结
2014/11/19 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
python如何读取和存储dict()与.json格式文件
2022/06/25 Python