Angular 2 图片上传前调整大小

Question

我想在将图片上传到服务器之前对其进行调整大小，目前我正在使用ng2-imageupload完成以下操作：

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

导出类WpMediaFormComponent { 文件: 文件;

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事件中？

我有点迷失了。

- rhysclay

---

我非常确定这是不可能的，但很想被证明是错误的！ - Davy

哦，没错，我刚刚把一个800kB的文件上传成了30kB，很快会发布更新。全是服务器端操作！ - rhysclay

我现在有点困惑，是在客户端还是服务器上进行调整大小？ - Davy

使用ng2-imageresize模块调整图像大小，它在客户端进行调整大小，然后发送到服务器。 - rhysclay

Answer 1

在@Brother Woodrow和这个帖子的帮助下，我解决了问题： 如何在JavaScript中将Blob转换为File

这是我的更新后的代码，唯一需要更改的是所选方法：

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并发送到服务器，这对于用户来说非常好，特别是因为这个应用程序将主要在移动设备上使用。

- rhysclay

---

rhysclay，感谢您提供有效的答案。请随意将其标记为答案。这样做可以通过使问题/答案更加可见来帮助他人。 P.S. 在StackOverflow中回答自己的问题并将其标记为已解答是完全可以的。https://stackoverflow.com/help/self-answer - Just Shadow

Answer 2

你需要将数据URI转换为Blob，然后将其发送回服务器。这可能会有所帮助: 将数据URI转换为文件，然后追加到FormData。

一旦你有了Blob，使用FormData和Angular HTTP类将其上传到服务器进行进一步处理应该很容易。

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

- Brother Woodrow

---

谢谢，我已经成功将数据 URI 转换为 Blob 格式，但是我不确定如何将其发送到服务器，我会更新我的代码。 - rhysclay

这应该很容易，只需使用 FormData 和 Angular 的 HTTP 类即可。我在我的帖子中更新了一小部分示例代码。 - Brother Woodrow

你真是个传奇！实际上，我最终做了一个稍微不同的方法，因为我仍然想用我的http上传文件，但是你帮助我足够理解了它。我很快会发布更新。 - rhysclay