2

使用filereader API ，可以通过readAsDataURL读取文件来显示文件的预览

我想做的是：

  1. 用户选择一个文件
  2. 显示预览，以便用户有一些反馈。
  3. 如果用户满意，他会将数据提交给后端。

可以通过使用readAsBinaryString重新读取文件来实现步骤 3 ，但这看起来有问题，因为数据可能已经在磁盘上消失或更改。所以我想要的是将返回的数据转换为返回readAsDataURL的格式readAsBinaryString。我怎样才能做到这一点？

另一种选择是将数据提交到后端返回readAsDataURL，但我想避免这种情况，因为在我的情况下这需要对后端进行特殊处理。

4

1 回答 1

2

就像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-01T05:50:04.753 回答