角2图像调整上传前

进出口寻找调整图像大小前，它被上传到服务器，此刻我使用NG2-imageupload这样的：角2图像调整上传前

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

我有点迷路了。

来源

2017-03-09 rhysclay

我很确定这是不可能的，但愿意被证明，否则！ – Davy

噢，但它是，我只需要一个800kB的文件，并发布为30kB，将很快发布更新。所有服务器端的宝贝！ – rhysclay

我现在困惑了，是在客户端还是服务器上完成的大小调整？ – Davy

您需要将Data 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);

来源

2017-03-09 10:40:21

谢谢我能够将数据uri转换为blob，但是我不确定如何将其发送到服务器，代码 – rhysclay

这应该很容易，只需使用FormData和Angular的HTTP类。我用一些示例代码更新了我的帖子。 –

你是一个传奇人物！我实际上最终做了一个稍微不同的方式，因为我仍然想用我的http发布一个文件，但是你帮我取笑了一下。我很快发布更新。 – rhysclay

所以我想通了与@Brother伍德罗的帮助下，这个线程： 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左右，这对用户来说非常适合，尤其是当这个应用程序将主要由移动设备使用时。

来源

2017-03-09 23:31:31 rhysclay

角2图像调整上传前

回答

相关问题