角度图片上传

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