javascript createObjectURL 损坏的文件

Question

我正在使用以下 javascript 创建对象 url，唯一的问题是加载 url blob:http:///mysite.com/randomhash 文件已损坏。

var audioFile = null;
var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
              audioFile = new Blob([xhttp.response], {type: 'audio/mp3'});
          }
        };
        xhttp.open("GET", "myMp3File.mp3", false);
        xhttp.send();

var file = new File([audioFile], "myMp3File.mp3", {type: "audio/mp3", lastModified: Date.now()});  

关于为什么这会创建带有损坏的 mp3 的 blob url 的任何想法？

Answer 1

这里有多个问题。
首先，您正在处理异步代码。您需要使用回调才能使用 XHR 请求的响应。

那么，即使您这样做了，也很有可能仍然无法正常工作。这是因为你得到的响应是纯文本 UTF16，一些字节会被编码破坏。

在您的情况下，真正的解决方案是直接请求响应作为 Blob。
您可以使用 XMLHttpRequest.responseType 参数执行此操作。

var xhttp = new XMLHttpRequest();
xhttp.responseType = 'blob';
xhttp.onload = function(e) {
  var blob = xhttp.response;
  callback(blob);
};
xhttp.open...

现在在您的回调中，您将能够直接从这个 blob 创建一个 blobURI。

function callback(blob) {
  var url = URL.createObjectURL(blob);
  ...

另外，如果你只想显示这个文件，那么从它创建一个文件是没有意义的，如果它是一个文件而不仅仅是一个 Blob，唯一会有所不同的 Web API 是 Formdata .append 方法，即使在那里，它也不是很有用。