Ngx花纹
此软件包的目的是为 Angular 创建用于文件加载的包装器 流动。 js。 。 。 .
演示
https://stackblitz.com/edit/ngx-flow-example 页面存档备份,存于互联网档案馆
您也可以在 src 文件夹.
路线图
- qq 上传单文件
- qq 上传多个文件
- qq 队列管理
- qq 错误处理
- qq 暂停/ 恢复上传
- qq 取消上传, 取消所有上传
- qq 上传进度
- qq 文件/ 目录限制
- qq 拖放( d)
- qq 显示上传图像
- 测试
- 在选择文件后右上传qq
- 使用 TravisCI 运行测试
- 使用 Stackblitz 演示
- qq 支持服务器侧面渲染
安装
npm install @flowjs/flow.js @flowjs/ngx-flow
在模块中导入 :
import { NgxFlowModule, FlowInjectionToken } from '@flowjs/ngx-flow';
import Flow from '@flowjs/flow.js';
@NgModule({
imports: [NgxFlowModule],
providers: [
{
provide: FlowInjectionToken,
useValue: Flow
}
]
})
export class AppModule
我们使用依赖性注射来提供流.js库.
如何使用
-
启动服务器 。 有一个服务器实例取自 流动。 js 在这里
server目录。 在此重存中, 您可以使用npm run server。 。 。 . -
首先, 您需要初始化 ngx 流程指令并导出, 例如
flow变量 :<ng-container #flow="flow" [flowConfig]="{target: 'http://localhost:3000/upload'}"></ng-container> -
现在您可以使用任一指令
flowButton用于选择文件对话框 :<input type="file" flowButton [flow]="flow.flowJs" [flowAttributes]="{accept: 'image/*'}" />或者说
flowDrop用于拖放特性 :<div class="drop-area" flowDrop [flow]="flow.flowJs"></div>都得通过
[flow]=flow.flowJs地点flow是第 1 步导出的模板变量. -
您无法订阅可观察的转让:
<div *ngFor="let transfer of (flow.transfers$ | async).transfers"></div> -
在添加文件后, 您可以开始使用上传
upload()方法 :<button type="button" (click)="flow.upload()" [disabled]="!(flow.somethingToUpload$ | async)">Start upload</button>
怎么样 transfers$ 数据看起来像?
可观察 flow.transfers$ 形式状态 :
{
totalProgress: 0.5,
transfers: [
{
name: "somefile.txt",
flowFile: FlowFile,
progress: number,
error: boolean,
paused: boolean,
success: boolean,
complete: boolean,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "uploading.txt",
flowFile: FlowFile,
progress: 0.5,
error: false,
paused: false,
success: false,
complete: false,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
},
{
name: "failed-to-upload.txt",
flowFile: FlowFile,
progress: number,
error: true,
paused: false,
success: false,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
{
name: "uploaded.txt",
flowFile: FlowFile,
progress: number,
error: false,
paused: false,
success: true,
complete: true,
currentSpeed: number,
averageSpeed: number,
size: number,
timeRemaining: number,
}
],
flow: { /* flow.js instance*/ }
}
财务问题
我需要访问 group.js 对象
你可以从下面找到 flow 变量.
<p>Is flowjs supported by the browser? {{flow.flowJs?.support}}</p>
我看到上传过程中的闪烁
使用 trackBy 页:1 ngFor数字 :
<div *ngFor="let transfer of (flow.transfers$ | async).transfers; trackBy: trackTransfer"></div>
export class AppComponent {
trackTransfer(transfer: Transfer) {
return transfer.id;
}
}
我需要一个文件
添加 singleFile: true 到您的流量配置 :
<ng-container #flow="flow" [flowConfig]="{target: 'http://localhost:3000/upload', singleFile: true}"></ng-container>
我要上传整个目录
添加 flowDirectoryOnly="true" 转到您的按钮 :
<input type="file" flowButton [flow]="flow.flowJs" flowDirectoryOnly="true" [flowAttributes]="{accept: 'image/*'}" />
我要显示要上传的图像
使用指令 flowSrc数字 :
<div *ngFor="let transfer of (flow.transfers$ | async).transfers">
<img [flowSrc]="transfer" />
</div>
选择文件后如何触发上传?
订阅 events$. NgxFlow 收听这些活动: filesSubmitted, (中文(简体) ), fileRemoved, (中文(简体) ), fileRetry, (中文(简体) ), fileProgress, (中文(简体) ), fileSuccess, (中文(简体) ), fileError 流动的Js。 活动 fileSubmitted 当用户丢弃或选择文件时,会开火.
export class AppComponent implements AfterViewInit, OnDestroy {
@ViewChild('flow')
flow: FlowDirective;
autoUploadSubscription: Subscription;
ngAfterViewInit() {
this.autoUploadSubscription = this.flow.events$.subscribe((event) => {
if (event.type === 'filesSubmitted') {
this.flow.upload();
}
});
}
ngOnDestroy() {
this.autoUploadSubscription.unsubscribe();
}
}
发展
npm run build - 将库建入 dist 文件夹
在此之后, 您可以发布到 npm 仓库 dist 文件夹 :
cd dist/ngx-flow
npm publish