Angular 图片上传

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 });
  }

现在您可以创建文件 并将其上传到服务器。下面是一个 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
    });
  }