User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php
在此程序包中，我实现了以下代码：upload.component.html：
- upload :
upload.component.html
upload.component.ts
upload.module.ts
upload.component.ts：
<div class="row">
<div class="col-12">
<ngfFormData [files]="files" postName="file" [(FormData)]="sendableFormData"></ngfFormData>
<ngfUploadStatus [(percent)]="progress" [httpEvent]="httpEvent"></ngfUploadStatus>
<div class="inline-block">
</div>
<div>
<h3>Drop Files</h3>
<div class="border padding-15 border-radius bg-white mb-2">
<div class="inline-block">
<div ngfDrop [(validDrag)]="baseDropValid" (fileOver)="hasBaseDropZoneOver=$event" [(files)]="files" [accept]="accept" [maxSize]="maxSize"
[(dragFiles)]="dragFiles" [(lastInvalids)]="lastInvalids" class="well my-drop-zone" [class.invalid-drag]="baseDropValid===false"
[class.valid-drag]="baseDropValid" (filesChange)="lastFileAt=getDate()">
<p class="font">Glisser/Déposer le document ou choisir un document...</p>
</div>
</div>
</div>
</div>
<div class="inline-block">
<strong>maxSize in bytes</strong>
<div>
<input type="number" [(ngModel)]="maxSize" placeholder="1024 == 1mb" />
</div>
</div>
<div *ngIf="dragFiles">
<h3 style="margin:0">Drag Files</h3>
<p *ngIf="!dragFiles.length" style="color:red;">
This browser does NOT release metadata for files being dragged. All files will be considered valid drags until dropped.
</p>
<pre>{{ dragFiles | json }}</pre>
</div>
<div class="bg-warning" *ngIf="lastInvalids?.length" style="margin-bottom: 40px">
<h3 style="color:red;">Last {{ lastInvalids.length }} Invalid Selected Files</h3>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Error</th>
<th>Type</th>
<th>Size</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of lastInvalids;let i=index">
<td>
<div *ngIf="['image/gif','image/png','image/jpeg'].indexOf(item.file.type)>=0">
<div class="previewIcon" [ngfBackground]="item.File"></div>
</div>
<strong>{{ item.file.name }}</strong>
</td>
<td nowrap>
{{ item.type }}
</td>
<td nowrap>
{{ item.file.type }}
</td>
<td nowrap>
{{ item.file.size/1024/1024 | number:'.2' }} MB
</td>
<td nowrap>
<button type="button" class="btn btn-danger btn-xs" (click)="lastInvalids.splice(i,1)">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin-bottom: 40px">
<h3>{{ files.length }} Queued Files</h3>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of files;let i=index">
<td>
<div *ngIf="['image/gif','image/png','image/jpeg'].indexOf(item.type)>=0">
<div class="previewIcon" [ngfBackground]="item"></div>
</div>
<strong>{{ item.name }}</strong>
</td>
<td nowrap>
{{ item.type }}
</td>
<td nowrap>
{{ item.size/1024/1024 | number:'.2' }} MB
</td>
<td nowrap>
<i class="icons icon-file_delete pointer" (click)="files.splice(i,1)"></i>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': progress + '%' }"></div>
</div>
</div>
<ng-container *ngIf="lastFileAt">
<p>
<strong>Last file(s) selected At:</strong> {{ lastFileAt | date : 'longTime' }}
</p>
</ng-container>
<i *ngIf="progress==100" class="glyphicon glyphicon-ok"></i>
<button (click)="uploadFiles(files)" >
Upload all
</button>
<button (click)="cancel()" >
Cancel all
</button>
<button (click)="files.length=0" >
Remove all
</button>
</div>
</div>
</div>
upload.module.ts：
import { Component, OnInit, NgModule } from '@angular/core';
import { ngfModule, ngf } from "angular-file";
import {
HttpClient, HttpRequest, HttpResponse, HttpEvent
} from "@angular/common/http";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from '@angular/platform-browser';
import { Subscription } from 'rxjs';
@Component({
selector: 'sof-upload',
templateUrl: './upload.component.html',
styleUrls: ['./upload.component.scss']
})
export class UploadComponent implements OnInit {
accept = '*'
files:File[] = []
progress:number
url = 'https://evening-anchorage-3159.herokuapp.com/api/'
hasBaseDropZoneOver:boolean = false
httpEmitter:Subscription
httpEvent:HttpEvent<{}>
lastFileAt:Date
sendableFormData:FormData//populated via ngfFormData directive
constructor(public HttpClient:HttpClient) { }
cancel(){
this.progress = 0
if( this.httpEmitter ){
console.log('cancelled')
this.httpEmitter.unsubscribe()
}
}
uploadFiles(files:File[]):Subscription{
const req = new HttpRequest<FormData>('POST', this.url,
this.sendableFormData, {
reportProgress: true//, responseType: 'text'
})
return this.httpEmitter = this.HttpClient.request(req)
.subscribe(
event=>{
this.httpEvent = event
if (event instanceof HttpResponse) {
delete this.httpEmitter
console.log('request done', event)
}
},
error=>console.log('Error Uploading',error)
)
}
getDate(){
return new Date()
}
ngOnInit() {
}
}
然后我尝试在其他组件中调用其选择器，所以我刚刚创建了该组件并添加了：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UploadComponent } from './upload.component';
@NgModule({
imports: [
CommonModule,
],
declarations: [UploadComponent],
providers: [],
exports: [UploadComponent]
})
export class UploadModule { }
我在我的app.module.ts中添加了第一个组件模块 但我收到了我无法解决的错误：
<sof-upload></sof-upload>
答案 0 :(得分：0)
通过在子模块的导入中添加ngfModule解决了这一问题。很好的例子，请尝试尝试。