angularjs多个图像上传与裁剪

Question

我找到了一个很好的angularjs代码，支持使用裁剪工具上传多个图像。

我搜索了很多，但要么我得到一个很好的多图像上传或我得到单个图像裁剪。

有什么东西支持两者。

请帮忙。

Answer 1

> <div class="multiple-images">
                                <input  type="file" (change)="fileChangeEvents($event)" multiple/>

                                <div>
                                <image-cropper
                                    [imageBase64]="imageBase64"
                                    [maintainAspectRatio]="true"
                                    [aspectRatio]="4 / 3"
                                    [resizeToWidth]="128"
                                    [roundCropper]="false"
                                    format="png"
                                    outputType="both"
                                    (imageCropped)="imageCrop($event)"
                                    (imageLoaded)="imageLoad()"
                                    (loadImageFailed)="loadImageFail()"
                                    style="max-height: 33vh"
                                    [style.display]="cropReady ? null : 'none'"
                                ></image-cropper>
                                </div>
                                <div *ngFor="let key of objectKeys(croppedImages)">
                                    <img  [src]="croppedImages[key]"  />
                                </div>
                            </div>
//multiple image upload start
     imageBase64: string = '';
     objectKeys = Object.keys;
     fileName: string;
     cropReady = false;
     croppedImages: any =[];
     imageName: string;
     fileChangeEvents(event: any): void {
        const fileReader = new FileReader();
        fileReader.onload = (event: any) => {
                        this.imageBase64 = event.target.result;
        };
                fileReader.readAsDataURL(event.target.files[0]);
                this.imageName = event.target.files[0].name
                console.log(event.target.files[0].name);
  }
  imageCrop(event: ImageCroppedEvent ) {
        this.croppedImages[this.imageName] = event.base64;
}
imageLoad() {
    this.cropReady = true;
  }
  loadImageFail () {
    console.log('Load failed');
  }