轉換圖像readAsBinaryString

使用filereader API，可以顯示文件的預覽，通過讀取該文件與readAsDataURL 轉換圖像readAsBinaryString

我所試圖做的是：

用戶選擇一個文件
預覽顯示，以便用戶有一些反饋。
如果用戶滿意，他將數據提交給後端。

實施步驟3可以通過用readAsBinaryString重新讀取文件來完成，但是這看起來有問題，因爲數據可能在磁盤上消失或更改。所以我想將readAsDataURL返回的數據轉換爲readAsBinaryString返回的格式。我怎樣才能做到這一點？

另一種方法是將數據提交到後端，由readAsDataURL返回，但我想避免這種情況，因爲在我的情況下，需要對後端進行特殊處理。

來源

2013-09-23 dangonfast

爲什麼磁盤上的映像消失或更改？ – Bart

因爲有人更改或刪除了它？在產生預視圖的時刻和數據發送到後端的時刻之間，0到1百萬年的任何事物都可以通過。在那個時候，很多事情都可能發生。 – dangonfast

_「因爲數據可能已經消失或在磁盤上發生了變化」 - 在現實世界中情況如何？這可能意味着用戶願意改變文件，或者某些程序在後臺做了這些......恕我直言，這兩種情況都不是真正可能的情況（第一種情況甚至有點荒謬，因爲用戶_wants_要上傳他在預覽中看到的內容）。恕我直言，你在這裏投資的時間在一個「問題」，實際上應該是接近無。 – CBroe

就像CBroe所說的，你不需要兩次讀取文件。

JS：

handleFileSelectThumbFile(evt){ 
    var files = evt.target.files; 
    var file = files[0]; 

    // You can get the mime type like this. 
    var thumbMIME = files[0]['name'].split('.').pop(); 
    if (files && file) { 
     var reader = new FileReader(); 

     reader.onload = function(readerEvt) { 

     // Split the readerEvt.target.result by a ','. 
     // You can send the binaryString variable to the server. 
     // Its base64 encoded already. 
     var binaryString = readerEvt.target.result.split(',')[1]; 

     // Set the image preview to the uploaded image. 
     $('.img-preview').prop('src', readerEvt.target.result); 
     }.bind(this); 
     reader.readAsDataURL(file); 
    } 
    }

HTML：

<input type="file" onChange={this.handleFileSelectThumbFile} required/> 
    <img src='http://placehold.it/300' class='img-preview'/>

你可以閱讀從readerEvt的第一部分以及MIME類型。請看上面的CBroe的評論。

來源

2016-10-01 05:50:04 KindSyco

轉換圖像readAsBinaryString

回答

相關問題