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 入门基础学习
Mar 10 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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 使用curl提交json格式数据
2013/06/29 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
python写的一个文本编辑器
2014/01/23 Python
python的三目运算符和not in运算符使用示例
2014/03/03 Python
Python格式化css文件的方法
2015/03/10 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
水果连锁超市创业计划书
2014/01/24 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
工程安全生产协议书
2014/11/21 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python 实现两个变量值进行交换的n种操作
2021/06/02 Python