2

filereader APIを使用すると、readAsDataURLでファイルを読み取ることにより、ファイルのプレビューを表示できます。

私がやろうとしていることは次のとおりです。

  1. ユーザーがファイルを選択
  2. プレビューが表示されるので、ユーザーはフィードバックを得ることができます。
  3. ユーザーが満足すれば、データをバックエンドに送信します。

ステップ 3 の実装は、 readAsBinaryStringを使用してファイルを再読み込みすることで実行できますが、データがディスク上で消失または変更された可能性があるため、これには問題があるように見えます。だから私が望むのは、から返されたデータをからreadAsDataURL返された形式に変換することreadAsBinaryStringです。これどうやってするの？

もう1つの方法は、によって返されたデータをバックエンドに送信するreadAsDataURLことですが、私の場合はバックエンドで特別な処理が必要になるため、これは避けたいと思います。

4

1 に答える 1

2

CBroeが言ったように、ファイルを 2 回読み取る必要はありません。

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-01T05:50:04.753 に答える