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实现的导航固定效果
Apr 28 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
微信小程序 获取微信OpenId详解及实例代码
Oct 31 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 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中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
js计算精度问题小结
2013/04/22 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
js中less常用的方法小结
2017/08/09 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue实现计步器功能
2019/11/01 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JS实现简单日历特效
2020/01/03 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
详解python算法之冒泡排序
2019/03/05 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
Django框架 信号调度原理解析
2019/09/04 Python
Python list运算操作代码实例解析
2020/01/20 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
keras多显卡训练方式
2020/06/10 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
当当网软件测试笔试题
2015/11/24 面试题
网络事业创业计划书范文
2014/01/09 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
大一新生检讨书
2014/10/29 职场文书
英语感谢信范文
2015/01/20 职场文书
爱心捐书倡议书
2015/04/27 职场文书
保外就医申请书范文
2015/08/06 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang