将图像从 readAsDataURL 转换为 readAsBinaryString答案

【问题标题】：Convert image from readAsDataURL to readAsBinaryString将图像从 readAsDataURL 转换为 readAsBinaryString
【发布时间】：2013-09-23 13:13:47
【问题描述】：

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

我想做的是：

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

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

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

【问题讨论】：

为什么磁盘上的图像会消失或改变？
因为有人更改或删除了它？从生成预览的那一刻到数据发送到后端的那一刻，从 0 到一百万年的任何事情都可以过去。在那个时候，很多事情都会发生。
“因为磁盘上的数据可能已经消失或改变了”——在现实条件下这种可能性有多大？这要么意味着用户自愿更改了文件，要么是某个程序在后台执行了此操作……恕我直言，这两种情况都不太可能发生（第一个甚至有点荒谬，因为用户想要上传他的在预览中看到）。恕我直言，您在一个“问题”上投入了时间，实际上几乎没有。
@CBroe：我明白你的意思。我必须承认我在这方面投入时间的真正原因不是因为我担心磁盘上发生的事情（这只是让我看起来很专业的假理由），而是因为我认为从一种格式到另一种格式实际上比重新读取文件更容易，例如 var binaryData = blahblah(urlData); 当然，如果从 readAsDataURL 转换为 readAsBinaryString 非常困难，我不妨重新- 以二进制形式读取文件。我不知道我在这里走的是未知领域。
好吧，readAsDataURL 将返回一个Data URI——如果你去掉开头的data:[<MIME-type>] 部分和使用的编码，并反转使用的编码（base64，如果;base64, 是目前，标准 %xx 十六进制 URL 编码，否则您应该拥有与 readAsBinaryString 相同的二进制数据。我也怀疑这会比首先使用readAsBinaryString 再次读取数据更好。

标签： javascript html fileapi

【解决方案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的评论。

【讨论】：