我需要使用Angular8和node.js上传一些图像。我在下面解释我的代码。
<div class="container text-center">
<button mat-button (click)="openDialog('Add',{})" mat-flat-button color="primary">Add Row</button>
<div class="clear"></div>
<mat-table #table [dataSource]="dataSource" class="my-table mat-elevation-z8">
<!-- Name Column -->
<ng-container matColumnDef="Color">
<th mat-header-cell *matHeaderCellDef style="text-align: center;font-size: 18px;"> Color </th>
<td mat-cell *matCellDef="let element; let i = index;">
<mat-select
placeholder="Select Option"
aria-label="Select Option"
class="example-margin"
[(ngModel)]="element.opName"
>
<mat-option *ngFor="let s of color" [value]="s">
<span *ngIf="!s">
</span>
<span *ngIf="s">
{{s}}
</span>
</mat-option>
</mat-select>
</td>
</ng-container>
<!-- Value column -->
<ng-container matColumnDef="Sizes">
<th mat-header-cell *matHeaderCellDef style="text-align: center;font-size: 18px;"> Sizes </th>
<td mat-cell *matCellDef="let element; let i = index;">
<mat-select
placeholder="Select Value"
aria-label="Select Value"
class="example-margin"
[(ngModel)]="element.opVal"
>
<mat-option *ngFor="let s of size" [value]="s">
<span *ngIf="!s">
</span>
<span *ngIf="s">
{{s}}
</span>
</mat-option>
</mat-select>
</td>
</ng-container>
<!-- Price column -->
<ng-container matColumnDef="Price">
<th mat-header-cell *matHeaderCellDef style="text-align: center;font-size: 18px;"> Price </th>
<td mat-cell *matCellDef="let element; let i = index;">
<input matInput placeholder="Price" (keypress)="numberOnly($event)" maxlength="13" aria-label="Price" [(ngModel)]="element.opPrice">
</td>
</ng-container>
<!--End Price column-->
<!-- Image column -->
<ng-container matColumnDef="Image">
<th mat-header-cell *matHeaderCellDef style="text-align: center;font-size: 18px;"> Image </th>
<td mat-cell *matCellDef="let element; let i = index" class="action-link">
<mat-icon matSuffix (click)="openImageDialog(image, i)">image</mat-icon>
<!-- <a (click)="openDialog('Delete',i)" class="btn btn-md btn-danger text-upper" style="cursor: pointer;">Delete</a> -->
</td>
</ng-container>
<!-- End Image column -->
<!-- Action section -->
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef style="text-align: center;font-size: 18px;"> Action </th>
<td mat-cell *matCellDef="let element; let i = index" class="action-link">
<mat-icon matSuffix (click)="openDialog('Delete',i)">delete</mat-icon>
<!-- <a (click)="openDialog('Delete',i)" class="btn btn-md btn-danger text-upper" style="cursor: pointer;">Delete</a> -->
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>
</div>
<div class="form-footer">
<div style="margin-top:2%; margin-bottom: 2%; text-align: center;">
<button class="btn btn-md btn-primary text-upper" type="button"
(click)="addProduct($event)">Save</button>
<button class="btn btn-md btn-danger text-upper" type="reset" (click)="resetForm($event)">Reset</button>
</div>
</div>
</div>
<ng-template #image let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-title">Upload images</h4>
<button type="button" class="close" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="section">
<div class="help-content">
<h5>Media information</h5>
</div>
<div class="form-content">
<section>
<div class="row">
<div class="col-xs-12">Dimension</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Base Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #dbsIMage [accept]="'.png,.jpg,.jpeg'" (change)="handleFileInput($event)"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Front image</mat-label>
<ngx-mat-file-input placeholder="Logo" #dfrImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Back Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #dbcImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Right Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #drhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Left Hand Side image</mat-label>
<ngx-mat-file-input laceholder="Logo" #dlhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-xs-12">Dimension-50</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Base Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d50bsIMage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Front image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d50frImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Back Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d50bcImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Right Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d50rhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Left Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d50lhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-xs-12">Dimension-370</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Base Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d370bsIMage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Front image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d370frImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Back Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d370bcImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Right Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d370rhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Left Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d370lhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-xs-12">Dimension-1100</div>
</div>
<div class="row">
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Base Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d1100bsIMage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Front image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d1100frImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Back Image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d1100bcImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field appearance="outline">
<mat-label>Right Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d1100rhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Left Hand Side image</mat-label>
<ngx-mat-file-input placeholder="Logo" #d1100lhImage [accept]="'.png,.jpg,.jpeg'"></ngx-mat-file-input>
<mat-icon matSuffix>image</mat-icon>
</mat-form-field>
</div>
</div>
</section>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" (click)="modal.dismiss('cancel')">Cancel</button>
<button type="button" class="btn btn-danger" (click)="modal.close('ok')">Ok</button>
</div>
</ng-template>
在这里，我有一个包含colour,size,price and image的表。当用户单击Add按钮时，将创建新行。在这里，我的目标是根据colour and sizes的不同部分中存在的多个图像将上载并相应地保存到集合中。我在下面解释我的打字稿代码。
addProduct(event: any) {
event.preventDefault();
console.log('add', this.dataSource);
this.productsService.addProduct(this.productForm.value, this.dataSource)
.subscribe((res: any) => {
console.log('add', res);
if( res['success'] == true){
alert(res['message']);
this.router.navigate(['products']);
}else{
}
})
}
resetForm(event: any) {
this.productForm.reset();
this.dataSource = [
{opName: '', opVal: '', opPrice: ''}
];
}
openDialog(action,index) {
if(action == 'Add'){
this.dataSource = this.dataSource.concat([{opName: '', opVal: '', opPrice: ''}]);
this.allValuesArr[index]=[];
}else if(action == 'Delete'){
if(index==0){
this.dataSource = [
{opName: '', opVal: '', opPrice: ''}
];
}else{
this.dataSource = this.dataSource.filter((value,key)=>{
return key != index;
});
}
}
}
openImageDialog(content: any, index: any) {
this.modalService.open(content, {size: 'xl',ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
}, (reason) => {
console.log(reason, 'reason');
})
/*this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
console.log('result', result);
}, (reason) => {
console.log(reason, 'reason');
});*/
}
在这里，我需要在节点服务器中单独获取每一行的所有文件，然后上传到集合中。
该架构如下所示。
Options : [
new Schema(
{ Value : String, Name : String, price : String, image : String}
)
]
这里我只需要获取节点服务器端每一行的所有图像。