角度2の画像は、アップロードする前に

Question

それがサーバーにアップロードされる前に、私はこのようなNG2-imageuploadを使用しています現時点では、画像のサイズを変更するために探してイムのサイズを変更します;

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;" 

私は、この機能を使用してブロブにこのオブジェクトを変換することができます：

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

誰かがデータアップロードのonChangeイベントにdataURItoBlobメソッドから返されたBLOBをどのようにフィードできますか？

ここで少し失われています。

Answer 1

データURIをBlobに変換してからサーバーに送信する必要があります。 Convert Data URI to File then append to FormData

これで、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ウッドローの助けを借りて、このスレッドでそれを考え出し：

：ここ 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単位でサーバーにプッシュされます。