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로 얼룩 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); 
    ... 

당신이 원하는 모든이 파일을 표시하는 경우, 거기에서 파일, 유일한 웹 API를 만드는 어떤 점은 파일 인 경우이 차이를 만들 것입니다 및 단지의 Blob이다 Formdata.append 방법, 심지어 거기, 그것은 그렇게 유용하지 않습니다.