angular2 ng2-file-upload上传示例代码

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/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Angular4集成ng2-file-upload的上传组件

    在Github上找到了一个支持Angular4好用的文件上传组件ng2-file-upload,这里简单介绍一下这个库的集成使用方案. 本文基于该组件的1.2.1版. 1. 安装 安装非常简单,只要在项目根路径下运行如下npm命令即可: npm install ng2-file-upload --save 2. 使用说明 官方的文档写的非常简单,几乎看不出什么来,这里结合实际的使用调试,说明一下基本的配置和使用方案. 2.1. 集成到Module中 在需要使用的Module中需要引入如下两个模块

  • js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • angular2 ng2-file-upload上传示例代码

    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打包

  • 使用jquery.upload.js实现异步上传示例代码

    相关资源下载:upload 1:jsp代码: 导入jquery.upload.js和jquery-1.7.2.js 添加调用js的代码:<a href="javascript:void(0)" rel="external nofollow" onclick="doUpload()">上传</a> 在底部写: <iframe style="position:absolute;top:-9999px"

  • Spring Boot实现文件上传示例代码

    使用SpringBoot进行文件上传的方法和SpringMVC差不多,本文单独新建一个最简单的DEMO来说明一下. 主要步骤包括: 1.创建一个springboot项目工程,本例名称(demo-uploadfile). 2.配置 pom.xml 依赖. 3.创建和编写文件上传的 Controller(包含单文件上传和多文件上传). 4.创建和编写文件上传的 HTML 测试页面. 5.文件上传相关限制的配置(可选). 6.运行测试. 项目工程截图如下: 文件代码: <dependencies>

  • javaweb实现文件上传示例代码

    本文实例为大家分享了javaweb文件下载的具体实现代码,供大家参考,具体内容如下 文件上传示例 注意:jsp页面编码为"UTF-8" 文件上传的必要条件 1.form表单,必须为POST方式提交 2.enctype="multipart/form-data" 3.必须有<input type="file" /> 前端jsp页面 <%@ page language="java" import="ja

  • Spring实现文件上传(示例代码)

    在实际开发中,经常遇到要实现文件上传到服务器端的功能.Spring可以继承commons-fileupload插件来实现文件上传的功能.分为前端JSP编写和后台Controller的编写. 前期准备工作,首先要引入commons-fileupload这个jar包,pom.xml中的配置如下: 复制代码 代码如下: <!-- 实现文件上传,spring集成了这个功能 --><dependency> <groupId>commons-fileupload</group

  • js HTML5上传示例代码完整版

    本身用flash插件一直上传,但是有很多场景不兼容,有些核心配置改不了,终于整理好了一个HTML5的版本,下面有传送门: 解决了几个客户需要的几个主要问题: 可多文件选择,有特效不死板 自定义提交参数 文件大小数量限制 *MD5校验 服务器反馈信息展示 可控制上传顺序 多视图切换 这里还是申明一下插件核心组件出处CFUpdate (0.8.2 Base) HTML5 批量上传组件 HTML5版本,只要支持HTML5的浏览器都可以正常使用,并对触摸屏(手机,平板)进行了优化 IE9+ Firefo

  • php设置允许大文件上传示例代码

    用Nginx做为代理服务器, 后端为 apache2. 设置允许上传最大为100M的文件. 1. Nginx配置: http { ...... client_max_body_size 100m; ...... } 2. PHP 配置文件 ...... ; Maximum execution time of each script, in seconds ; http://php.net/max-execution-time ; Note: This directive is hardcoded

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • Angular2里获取(input file)上传文件的内容的方法

    最近在用Angular2,需要有一个上传文件的功能,但是又不想用库,所以直接用原生的input file 标签. <input type="file" id="newUpload" > 然后想获取上传的内容,于是先想了个愚蠢的方法,先通过id获取到这个input标签,然后再获取其中上传的内容 const uploadsFile = document.getElementById(name).files[0]; 结果就报错了.然后看提示说HTMLEleme

随机推荐