javascript - 将图像从 readAsDataURL 转换为 readAsBinaryString

Question

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

我想做的是:

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

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

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

Answer 1

赞CBroe said，你不需要读取文件两次。

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上面的评论。