Question

阅读文件来显示文件预览

我想做的是：

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

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

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

Answer 1

就像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的评论。

将图像从readAsDataURL转换为readAsBinaryString

1 个答案: