javascript - 图像上传功能在 Angular 6 中不起作用

Question

我正在使用“ngx-image-cropper”(https://www.npmjs.com/package/ngx-image-cropper)裁剪图像并使用图像的 base64 值将其发送到服务器。问题是图像有时会给出空值。我无法找到这种行为背后的原因。我正在使用 Angular “DOMSanitizer”上传图像并将其标记为“安全”以便 Angular 上传。这是我的代码HTML:

<div class="col-6">
                        <ng-template #placeholderImage>
                            <div>
                                <img width="200" height="200" [src]="imagePath">
                            </div>
                        </ng-template>
                        <image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="3/4" [resizeToWidth]="400" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()">
                        </image-cropper>

                    </div>
                    <div class="col-6">
                        <div *ngIf="croppedImage || existingStudentInfo; else placeholderImage" class="mb-5">
                            <img [src]="croppedImage ? croppedImage : (existingStudentInfo.studentPhoto?existingStudentInfo.studentPhoto:imagePath)" class="img-thumbnail img-fluid rounded">
                        </div>
                        <input class="mt-3" type="file" (change)="fileChangeEvent($event)" />
                    </div> 


ts: 

    import { ImageCroppedEvent } from 'ngx-image-cropper';
    import { DomSanitizer } from '@angular/platform-browser';
    import { defaultImage } from '../../common/constants/placeholder-image';

    @Component({
      selector: 'app-student-form',
      templateUrl: './student-form.component.html',
      styleUrls: ['./student-form.component.scss']
    })
    export class StudentFormComponent implements OnInit {


      studentPhoto: string;
      imagePreview: string | ArrayBuffer;
      croppedImage: string;
      imageChangedEvent: Event;
      public imagePath: any;

      constructor(private injector: Injector,
        public sanitizer: DomSanitizer) {
        this.imagePath = "../../../assets/imgs/placeholder.png";
      }


      submitHandler() {

        if (!this.croppedImage) {
          console.log("NO image found default image");
          let safeimage = this.sanitizer.bypassSecurityTrustResourceUrl(defaultImage);
          this.admissionForm.value.studentPhoto = safeimage['changingThisBreaksApplicationSecurity'];
        }
      }



      imageCropped(event: ImageCroppedEvent) {

        this.croppedImage = event.base64;

       this.admissionForm.controls.studentPhoto.updateValueAndValidity();
        let safeimage = this.sanitizer.bypassSecurityTrustResourceUrl(this.croppedImage);
        this.admissionForm.value.studentPhoto = safeimage['changingThisBreaksApplicationSecurity'];
      }
      loadImageFailed() {
        console.log("LOad failed");

      }
      fileChangeEvent(event) {
        const file: File = event.target.files[0];
        this.admissionForm.value.studentPhoto = file;
        this.imageChangedEvent = event;
        // console.log("IMage data ", this.admissionForm.value.studentPhoto);
      }
      imageLoaded() {
        // show cropper
        console.log("IMage loaded");
      }
      cropperReady() {
        // cropper ready
        console.log("Cropper loaded")
      }

    }

Answer 1

因为你已经在这里有了图像。您可以使用 FormData 添加您的图像然后提交到服务器

 submitHandler() {

        if (!this.croppedImage) {
          console.log("NO image found default image");
          let safeimage = this.sanitizer.bypassSecurityTrustResourceUrl(defaultImage);
          this.admissionForm.value.studentPhoto = safeimage['changingThisBreaksApplicationSecurity'];

          let fd = new FormData();
          fd.append("file", safeimage);
            // call http request to post image to server
        }
      }