Question

我希望在将图像上传到服务器之前调整图像大小，此时我正在使用像这样的ng2-imageupload：

  <input id="media" class="inputfile" type="file" name="media" image-upload
  (imageSelected)="selected($event)"
  [resizeOptions]="resizeOptions" (change)="onChange($event)">

导出类WpMediaFormComponent { file：文件;

resizeOptions: ResizeOptions = {
    resizeMaxHeight: 768,
    resizeMaxWidth: 438
};

selected(imageResult: ImageResult) {
    console.log(imageResult);
   this.dataBlob = this.dataURItoBlob(imageResult.resized.dataURL); 
    let blob = this.dataURItoBlob(imageResult.resized.dataURL);
}

然后返回一个对象，如下所示：

dataURL:"data:image/jpeg;base64, DATA URI HERE"
type:"image/jpeg;"

然后我可以使用此函数将此对象转换为blob：

dataURItoBlob(dataURI) {
        // convert base64/URLEncoded data component to raw binary data held in a string
        var byteString;
        if (dataURI.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(dataURI.split(',')[1]);
        else
            byteString = decodeURI(dataURI.split(',')[1]);

        // separate out the mime component
        var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

        // write the bytes of the string to a typed array
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }

        return new Blob([ia], {type:mimeString});
    }

在此之前，我使用以下代码将图像上传到服务器：

 onChange(event: EventTarget) {
        let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
        let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
        let files: FileList = target.files;
        this.file = files[0];
        console.log(this.file);
        //this.update.emit(this.file);
    }

有没有人知道如何将从dataURItoBlob方法返回的blob提供给文件上传onChange事件？

我有点迷失在这里。

Answer 1

您需要将数据URI转换为Blob，然后将其发送回您的服务器。这可能会有所帮助：Convert Data URI to File then append to FormData

获得blob之后，使用FormData和Angular HTTP类将其上传到服务器进行进一步处理应该很容易。

let formData = new FormData();
formData.append(blob);
this.http.post('your/api/url', fd).subscribe((response) => console.log(reponse);

Answer 2

所以我在@Brother Woodrow的帮助下想出来了，这个帖子： How to convert Blob to File in JavaScript

这是我更新的代码，而不是我唯一要改变的是所选方法：

selected(imageResult: ImageResult) {
    // create a blob 
    let blob: Blob = this.dataURItoBlob(imageResult.resized.dataURL);
    // get the filename
    let fileName: string = imageResult.file.name;
    // create a file
    this.file = new File([blob], fileName);
    console.log(this.file);
    // event emitter send to container then to http post 
    this.update.emit(this.file);        
}

我现在可以上传3MB，它们可以在几秒钟内推送到服务器大约150kB，这对用户来说非常好，特别是因为这个应用程序主要用于移动设备。

Angular 2 Image上传前调整大小

2 个答案: