Блог

Итак, я сталкиваюсь с ошибкой, из-за которой он не отправляет обрезанное изображение на серверную часть с помощью multer.

Я могу загрузить файл во внешний интерфейс, а затем обрезать изображение, но обрезанное изображение не отправляется в серверную часть, но это загруженный img, отправленный на серверную часть.

Я использую версию cropper.js at Angular 11 с модулем, который кто-то разработал для Angular.

это cropper.js https://fengyuanchen.github.io/cropperjs / И это модуль https://github.com/matheusdavidson/angular-cropperjs

Итак, моя идея такова. Загрузите фотографию -> обрезайте ее и сохраните в папке на серверной части. Сохранение работает, но оно сохраняет img по умолчанию, а не обрезанный img. Когда пользователь использует событие click для сохранения изображения, возьмите обрезанное изображение и сохраните его в серверной части.

Это мой пользовательский интерфейс и методы.

 <angular-cropper #angularCropper
[cropperOptions]="imgConfig"
 [imageUrl]="imgUrl | safeurl"></angular-cropper>

 <div class="btn-group">
      <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file" >
        <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*" (change)="fileChangeEvent($event)">
        <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="Import image with Blob URLs">
          <span class="fa fa-upload"></span>
        </span>
      </label>
    </div>



<button type="button" class="btn btn-primary" data-method="crop" title="Crop" (click)="saveImage()">
            <span class="docs-tooltip" data-toggle="tooltip" title="" data-original-title="cropper.crop()">
              <span class="fa fa-check"></span>
            </span>
          </button>
 

TS-файл

 imgUrl;
imageURL;
imageCrop;


@ViewChild("angularCropper", {static: false}) public angularCropper: CropperComponent;
public imgConfig = {
  aspectRatio : 3/4,
  dragMode : "move",
  background : true,
  movable: true,
  rotatable : true,
  scalable: true,
  zoomable: true,
  viewMode: 1,
  checkImageOrigin : true,
  checkCrossOrigin: true,
  width: 0,
  height: 0,
};
  fileChangeEvent(event: any): void {
     this.imgUrl = URL.createObjectURL(event.target.files[0]);
     this.imageCrop = event.target.files[0];
  }

saveImage() {

this.angularCropper.cropper.crop();
  this.imageService.addImage(this.imageCrop).subscribe((res: any) => {
    if (res.body) {
     this.imageService.getImageByID(res.body._id).subscribe((t: Image) => {
      this.imageURL = t.imageUrl;
      console.log(this.imageURL);
     });
    }
  }, (err: any) => {
    console.log(err);
  });
}
 

И это мой сервис

 @Injectable({
  providedIn: "root"
})
export class ImageService {
   apiUrl = environment.backend;

  constructor(private http: HttpClient) { }


  addImage(file: File): Observable<any> {
    const formData = new FormData();
    formData.append("file", file);
    const header = new HttpHeaders();
    const params = new HttpParams();

    const options = {
      params,
      reportProgress: true,
      headers: header
    };
    const req = new HttpRequest("POST", `${this.apiUrl}/images/${file.name}`, formData, options);
    return this.http.request(req);
  }
  getImageByID(id: string): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.get<Image>(url).pipe(
    catchError(this.handleError)
    );
    }
  private handleError(error: HttpErrorResponse): any {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, `  
        `body was: ${error.error}`);
    }
    return throwError(
      'Something bad happened; please try again later.');
  }

}
 

вы получите обрезанное изображение из выходных данных компонента cropper.. экспорт — это имя вывода