Question

我正在尝试使用ngx-image-cropper在我的应用上上传图片，但我无法保存裁剪的图片。例如，如果我尝试保存主文件（通过input type="file"加载的文件），一切正常。在这种情况下，文件发送方式如下：

{name: "300_3.jpg", 
lastModified: 1510510128437, 
lastModifiedDate: Sun Nov 12 2017 20:08:48 GMT+0200 (GTB Standard Time), webkitRelativePath: "", 
size: 81972, …}

但如果我尝试上传图片的裁剪版本，则文件如下所示：

data:image/png;base64,iVBORw0KGgoAAAANSU............

服务器的响应如下：

{error: "Bad Request",
exception:"org.springframework.web.multipart.support.MissingServletRequestPartException",
message: "Required request part 'file' is not present",
path: "/api/myEndPoint/",
status: 400,
timestamp: 1518424822285}

所以基本上我需要像第一种情况一样发送一个abject，但我所拥有的只是一个base64项。

这也是HTML代码，以防它有用：

<image-cropper
                    [imageChangedEvent]="imageChangedEvent"
                    [maintainAspectRatio]="true"
                    [aspectRatio]="4 / 4"
                    [resizeToWidth]="250"
                    format="png"
                    (imageCropped)="imageCropped($event)"
                    (imageLoaded)="imageLoaded()"
                    (loadImageFailed)="loadImageFailed()"
                    *ngIf="isUploadedFile">
                </image-cropper>

有人可以建议我如何上传裁剪版本而不是我上传的初始文件？或者这是需要在服务器上修复的东西，所以它可以接受我发送的文件？谢谢！

Answer 1

那个字符串：

data:image/png;base64,iVBORw0KGgoAAAANSU............

表示您的裁剪图像为dataURI。如果您希望上传裁剪后的图片，则应将其从dataURI转换为Blob。如果您已完成此操作，则可以从Blob File创建并将其上传到服务器。

以下是将dataURI转换为Blob的功能：

  dataURItoBlob(dataURI): Blob {
    const byteString = atob(dataURI.split(',')[1]);
    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const ab = new ArrayBuffer(byteString.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mimeString });
  }

现在您可以创建File并将其上传到服务器。以下是uplaod函数的示例：

  uploadAttachmentToServer() {
    const fileToUpload: File = new File([this.dataURItoBlob(yourCroppedImage)], 'filename.png');
    this.attachmentService.postAttachment(fileToUpload).subscribe(data => {
      // success, do something
    }, error => {
      // failure, do something
    });
  }

Answer 2

实际上ngx-image-cropper提供了一个属性imageCroppedFile，该属性为您提供了裁剪后的图像，该图像已转换为Blob，例如在您的html中：

<image-cropper
                [imageChangedEvent]="imageChangedEvent"
                ...
                (imageCroppedFile)="fileCropped($event)">
</image-cropper>

然后可以在组件中将Blob转换为File：

fileCropped(blob: Blob) {
    const file = new File([blob], 'image.png');
    // upload the file
}

Answer 3

ngx-image-cropper 带有一个 base64ToFile 函数，它返回一个 Blob 对象。

import { ImageCropperedEvent, base64Tofile } from 'ngx-image-cropper'

并且您的代码应如下所示：

someFunction(): File {
  // Assuming you have stored the event.base64 in an instance variable 'croppedImage'
  const file: File = new File([base64ToFile(this.croppedImage)], 'fileName.png');
  return file;
}

角度图片上传

3 个答案: