angular2 ng2-file-upload upload sample code

There are two more easy-to-use third-party libraries for uploading files in Angular2, one is ng2-file-upload and the other is ng2-uploader. ng2-uploader is a lightweight file upload support library with weak functions, while ng2-file-upload is a relatively comprehensive file upload support library. Here we will mainly introduce the use of ng2-file-upload.

Upload ng2-file-upload file

1. Install the ng2-file-upload module

npm install ng2-file-upload --save

2. If you use systemjs to package it, you need to configure the file

A. Enter the following fields in the last line in the map field:

'ng2-file-upload':'npm:ng2-file-upload'

B. Enter the last line in the packages field:

'ng2-file-upload': { 
 main: '', 
 defaultExtension: 'js'
}

3. In the file, or you have multiple modules, introduce the modules into the required modules

import { CommonModule }  from '@angular/common';
import { FileUploadModule } from 'ng2-file-upload';

Then refer to CommonModule and FileUploadModule in the imports field of @NgModule.

@NgModule({
 imports: [
  CommonModule,
  FileUploadModule
 ]
}

4. Use ng2-file-upload in custom upload components

import {Component, OnInit} from "@angular/core";
// A: Introducing FileUpload moduleimport {FileUploader} from "ng2-file-upload";
@Component({
 selector: "my-file",
 templateUrl: "./app/"
})
export class HomeFileComponent implements OnInit {
 // B: Initialize the uploader variable to configure the uploader attribute in the input public uploader:FileUploader = new FileUploader({
  url: "http://localhost:3000/ng2/uploadFile",
  method: "POST",
  itemAlias: "uploadedfile"
 });
 // C: Define events and select files selectedFileOnChanged(event:any) {
  // Print file and select name  ();
 }
 // D: Define events and upload files uploadFile() {
  // Upload  [0].onSuccess = function (response, status, headers) {
   // Upload the file successfully   if (status == 200) {
    // After uploading the file, get the data returned by the server    let tempRes = (response);
   } else {
    // The error in obtaining the data returned by the server after uploading the file    alert("");
   }
  };
  [0].upload(); // Start uploading }
}

5. Corresponding html content

&lt;input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" /&gt;
selectedFileOnChanged($event)exist .tsDefinition in the file

selectedFileOnChanged(event: any) {
 ();
}

Selecting files supports selecting a single file by default. If you need to support multiple file selection, please add the multiple attribute to the tag, that is:

Copy the codeThe code is as follows:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="selectedFileOnChanged($event)" multiple />

6. Drag and drop upload file

Supports multi-file drag and drop upload

Copy the codeThe code is as follows:

<div class="beforeDrop" ng2FileDrop [ngClass]="{dropping: isDropZoneOver}" (fileOver)="fileOverBase($event)" (onFileDrop)="fileDropOver($event)" [uploader]="uploader"><div>

Define drag and drop functions in the corresponding .ts file

fileOverBase(event) {
 // Callback function for changing drag state}
fileDropOver(event) {
 // Callback function completed by dragging and dropping of files}

7. File upload

FileUploader has an array type attribute queue, which contains all drag and selected files. As long as this attribute is operated, the file can be uploaded.

uploadFileHandel() {
 [0].onSuccess = function (response, status, headers) { 
  // Upload the file successfully  if (status == 200) {
   // After uploading the file, get the data returned by the server   let tempRes = (response);  
  }else {   
   // The error in obtaining the data returned by the server after uploading the file  }
 };
[0].upload(); // Start uploading}

Detailed introduction to FileUpload

**Initialize the configuration table**

Parameter name         Parameter Type    Is it an optional value    Parameter description
allowedMimeType    Array&lt;string&gt;  Optional value  
allowedFileType    Array&lt;string&gt;  Optional value  File types allowed to upload
autoUpload       boolean     Optional value  Whether to upload automatically
isHTML5        boolean     Optional value  Is it trueHTML5
filters        Array      Optional value  
headers        Array&lt;Headers&gt; Optional value  Request header parameters for uploading files
method         string     Optional value  How to upload files
authToken       string     Optional value  authVerifiedtoken
maxFileSize      number     Optional value  Maximum uploadable file size
queueLimit       number     Optional value  
removeAfterUpload   boolean     Optional value  Whether to remove from the queue after upload is completed
url          string     Optional value  Upload address
disableMultipart    boolean     Optional value  
itemAlias       string     Optional value  File tags／Alias
authTokenHeader    string     Optional value  authverifytokenRequest header

Reference website:/ng2-file-upload/

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.