Question

即时使用以下javascript创建对象网址，唯一的问题是加载网址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网址的任何想法？

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会有所不同{{1}方法，即使在那里，也没那么有用。

javascript createObjectURL损坏的文件

1 个答案: