ngx-上载器
角文件上传器
https://ngx-uploader.petadev.work 互联网档案馆的存檔,存档日期2013-12-21
有问题吗?
不打开一般支持问题的问题, 因为我们希望保留 GitHub 问题用于错误报告和特性请求 。 你有更好的机会 得到你的问题答案 叠叠流 问题应加标签 ngx-uploader。 。 。 .
为了节省你和我们的时间,我们将系统地解决所有要求普遍支持的问题,并将人们转向Stack Overflow.
安装
- 添加
ngx-uploader模块作为您项目的依赖性.
npm i @angular-ex/uploader --save
- 包含
NgxUploaderModule输入您的主应用程序或模块,您将使用该模块.
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUploaderModule } from 'ngx-uploader';
@NgModule({
imports: [BrowserModule, NgxUploaderModule],
declarations: [AppComponent]
})
export class AppModule {}
或者说 包含 NgxUploaderModule 进入您的共享模块。 如果您的工程已经嵌入了模块, 这可能有用 .
// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgxUploaderModule } from 'ngx-uploader';
...
@NgModule({
imports: [
CommonModule,
NgxUploaderModule,
...
],
exports: [
CommonModule,
NgxUploaderModule,
...
],
...
})
export class SharedModule {
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared.module';
@NgModule({
imports: [BrowserModule, SharedModule],
declarations: [AppComponent]
})
export class AppModule {}
事件和上传文件的数据结构
export interface UploaderOptions {
concurrency: number; // number of files uploaded at the same time
allowedContentTypes?: string[]; // content types allowed (default *)
maxUploads?: number; // max number of files the user can upload
maxFileSize?: number; // max size of the file in bytes the user can upload
}
export interface UploadProgress {
status: UploadStatus; // current status of upload for specific file (Queue | Uploading | Done | Canceled)
data?: {
percentage: number; // percentage of upload already completed
speed: number; // current upload speed per second in bytes
speedHuman: string; // current upload speed per second in human readable form,
eta: number; // estimated time remaining in seconds
etaHuman: string; // estimated time remaining in human readable format
};
}
export interface UploadFile {
id: string; // unique id of uploaded file instance
fileIndex: number; // fileIndex in internal ngx-uploader array of files
lastModifiedDate: Date; // last modify date of the file (Date object)
name: string; // original name of the file
size: number; // size of the file in bytes
type: string; // mime type of the file
form: FormData; // FormData object (you can append extra data per file, to this object)
progress: UploadProgress;
response?: any; // response when upload is done (parsed JSON or string)
responseStatus?: number; // response status code when upload is done
responseHeaders?: { [key: string]: string }; // response headers when upload is done
}
// output events emitted by ngx-uploader
export interface UploadOutput {
type:
| 'addedToQueue'
| 'allAddedToQueue'
| 'uploading'
| 'done'
| 'removed'
| 'start'
| 'cancelled'
| 'dragOver'
| 'dragOut'
| 'drop';
file?: UploadFile;
nativeFile?: File; // native javascript File object, can be used to process uploaded files in other libraries
}
// input events that user can emit to ngx-uploader
export interface UploadInput {
type: 'uploadAll' | 'uploadFile' | 'cancel' | 'cancelAll' | 'remove' | 'removeAll';
url?: string; // URL to upload file to
method?: string; // method (POST | PUT)
id?: string; // unique id of uploaded file
fieldName?: string; // field name (default 'file')
fileIndex?: number; // fileIndex in internal ngx-uploader array of files
file?: UploadFile; // uploading file
data?: { [key: string]: string | Blob }; // custom data sent with the file
headers?: { [key: string]: string }; // custom headers
includeWebKitFormBoundary?: boolean; // If false, only the file is send trough xhr.send (WebKitFormBoundary is omit)
concurrency?: number; // concurrency of how many files can be uploaded in parallel (default is 0 which means unlimited)
withCredentials?: boolean; // apply withCredentials option
}
上传限制
使用4.2.1版本,我们引入了Content-Types的限制. 为了不打破以前发行的行为,根本不存在默认的限制.
看着 应用家. 组件.ts 例如,Content-Type限制.
如果您想要为被拒绝的文件敬送信件, 请将此添加到您的 UploadOutput 方法中 .
onUploadOutput(output: UploadOutput): void {
....
} else if (output.type === 'rejected' && typeof output.file !== 'undefined') {
// console.log(output.file.name + ' rejected');
}
...
调试授权
如果您需要用 Token 授权上传文件, 您可以将标题设置为以下 :.
startUpload(): void {
let token = this.myToken; // <---- get token
const event: UploadInput = {
type: 'uploadAll',
url: 'http://ngx-uploader.petadev.work/upload',
method: 'POST',
headers: { 'Authorization': 'JWT ' + token }, // <---- set headers
data: { foo: 'bar' },
includeWebKitFormBoundary: true // <---- set WebKitFormBoundary
};
this.uploadInput.emit(event);
}
示例
您总是可以通过克隆此寄存器、 构建工程来运行工作示例 yarn build:prod 运行服务器 node ./dist-app/api/index.js。 。 。 .
组件代码
import { Component, EventEmitter } from '@angular/core';
import { UploadOutput, UploadInput, UploadFile, humanizeBytes, UploaderOptions } from 'ngx-uploader';
@Component({
selector: 'app-home',
templateUrl: 'app-home.component.html'
})
export class AppHomeComponent {
options: UploaderOptions;
formData: FormData;
files: UploadFile[];
uploadInput: EventEmitter<UploadInput>;
humanizeBytes: Function;
dragOver: boolean;
constructor() {
this.options = { concurrency: 1, maxUploads: 3, maxFileSize: 1000000 };
this.files = []; // local uploading files array
this.uploadInput = new EventEmitter<UploadInput>(); // input events, we use this to emit data to ngx-uploader
this.humanizeBytes = humanizeBytes;
}
onUploadOutput(output: UploadOutput): void {
switch (output.type) {
case 'allAddedToQueue':
// uncomment this if you want to auto upload files when added
// const event: UploadInput = {
// type: 'uploadAll',
// url: '/upload',
// method: 'POST',
// data: { foo: 'bar' }
// };
// this.uploadInput.emit(event);
break;
case 'addedToQueue':
if (typeof output.file !== 'undefined') {
this.files.push(output.file);
}
break;
case 'uploading':
if (typeof output.file !== 'undefined') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => typeof output.file !== 'undefined' && file.id === output.file.id);
this.files[index] = output.file;
}
break;
case 'removed':
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
break;
case 'dragOver':
this.dragOver = true;
break;
case 'dragOut':
case 'drop':
this.dragOver = false;
break;
case 'done':
// The file is downloaded
break;
}
}
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'http://ngx-uploader.petadev.work/upload',
method: 'POST',
data: { foo: 'bar' }
};
this.uploadInput.emit(event);
}
cancelUpload(id: string): void {
this.uploadInput.emit({ type: 'cancel', id: id });
}
removeFile(id: string): void {
this.uploadInput.emit({ type: 'remove', id: id });
}
removeAllFiles(): void {
this.uploadInput.emit({ type: 'removeAll' });
}
}
模板代码
整个模板代码请检查 这里。 。 。 .
<div
class="drop-container"
ngFileDrop
[options]="options"
(uploadOutput)="onUploadOutput($event)"
[uploadInput]="uploadInput"
[ngClass]="{ 'is-drop-over': dragOver }"
>
<h1>Drag & Drop</h1>
</div>
<label class="upload-button">
<input
type="file"
ngFileSelect
[options]="options"
(uploadOutput)="onUploadOutput($event)"
[uploadInput]="uploadInput"
multiple
/>
or choose file(s)
</label>
<button type="button" class="start-upload-btn" (click)="startUpload()">
Start Upload
</button>
属性
麻省理工学院