Javascript - Загрузка файла, readAsArrayBuffer?

Question

В настоящее время я пытаюсь загрузить файл на свой сервер. Но я не уверен, как это сделать с readAsArrayBuffer. Это работает, если я использую readAsBinaryString.

Если я пытаюсь console.log, он возвращает 'arrayBuffer: {}'. После того, как я попытался загрузить его, я вижу внутри сообщения, что был отправлен только пустой объект. Если я использую readAsBinaryString, я вижу кучу двоичного кода.

var file = document.getElementById('my_file').files[0], 
    reader = new FileReader(); 

    reader.onloadend = function(e){ 
     console.log(e.target.result); 
     $scope.image = e.target.result; 
    } 

    reader.readAsArrayBuffer(file); 

Как я могу просмотреть свой файл, поэтому я знаю, что он работает при использовании readAsArrayBuffer? Если требуется больше кода, дайте мне знать! Благодарю.

Answer 1

Если вы хотите загрузить изображение, то вы должны преобразовать его в формат base64. Вы можете сделать это либо с помощью холста элемента или с помощью Filereader.If вы используете FileReader, то вы должны использовать readAsDataURL()

Вы можете обратиться MDN для этого https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

также вы можете использовать холст элемент Convert an image to canvas that is already loaded

Answer 2

Согласно ArrayBuffer документации

Вы не можете напрямую управлять содержимое ArrayBuffer; вместо этого вы создаете один из типизированных объектов массива или объект DataView, который представляет буфер в определенном формате, и используйте это для чтения и записи содержимого буфера.

Так как я заметил, прежде чем, вероятно, console.log не знает, как представить буфер, и поэтому он просто выводит arrayBuffer: {}.

Если вы хотите показать что-то в консоли, вам нужно использовать типизированный массив или DataView. Например, с использованием Int8Array:

reader.onloadend = function (e) { 
    console.log(e); 
    console.log(new Int8Array(e.target.result)); 
}; 

См demo