fileReader.readAsBinaryString (файл), предотвращающий загрузку изображения из-за того, что параметр не является типом «Blob»

Question

Я пытаюсь загрузить изображение для использования внутри модального, которое правильно отображает назначенное по умолчанию образ, но при обновлении оно вызовет 405 ошибка. Я сузил виновник внутри этой функции обновления:

function update() 
{ 

var reader = new FileReader(); 
var file = $('#fileUpload')[0].files[0]; 
reader.readAsBinaryString(file); 

reader.onload = function (readerEvt) 
{ 
    //get binary data then convert to encoded string 
    var binaryString = reader.result; 
    var encodedString = btoa(binaryString); 

    //normal update fields 
    emp = new Object(); 
    emp.Title = $("#TextBoxTitle").val(); 
    emp.Firstname = $("#TextBoxFirstname").val(); 
    emp.Lastname = $("#TextBoxLastname").val(); 
    emp.Phoneno = $("#TextBoxPhone").val(); 
    emp.Email = $("#TextBoxEmail").val(); 
    emp.StaffPicture64 = encodedString; 
    emp.Id = localStorage.getItem("Id"); 
    emp.DepartmentId = localStorage.getItem("DepartmentId"); 
    emp.Version = localStorage.getItem("Version"); 
} 
ajaxCall("Put", "api/employees", emp) 
    .done(function (data) { 
     $("#myModal").modal("hide"); 
     getAll(data); 
    }) 
    .fail(function (jqXHR, textStatus, errorThrown) { 
     errorRoutine(jqXHR); 
    }); 
return false; 
} 

к этому блоку коды:

var reader = new FileReader(); 
var file = $('#fileUpload')[0].files[0]; 
reader.readAsBinaryString(file); 

конкретно reader.readAsBinaryString (файл); линия. Когда точка останова установлена ​​здесь, я получаю возвращается сообщение об ошибке:

Uncaught TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'.(…)

Это путает меня сильно, как я скопирован этот раздел загрузки файла из рабочего примера такого я сделал совсем недавно. Я не понимаю, почему один будет работать отлично, а другой бы возвращать ошибку, когда они оба, используя не внешний вход для тега «#fileUpload», который я определенно есть на странице .html, за исключением:

<div class="col-xs-8 text-left"> 
    <input id="fileUpload" type="file" /> 
</div> 

Почему это происходит? Я неправильно ссылался на свой тег fileUpload?

Answer 1

Вы не должны использовать FileReader, и вы не должны размещать его как JSON, если это то, что вы делаете ...

При загрузке файлов вы должны использовать многослойную загрузку и делая, таким образом Вы должны использование FormData

function update() { 

    var file = $('#fileUpload')[0].files[0] 
    var fd = new FormData 

    fd.append('Title', $('#TextBoxTitle').val()) 
    fd.append('Firstname', $('#TextBoxFirstname').val()) 
    fd.append('Lastname', $('#TextBoxLastname').val()) 
    fd.append('Phoneno', $('#TextBoxPhone').val()) 
    fd.append('Email', $('#TextBoxEmail').val()) 
    fd.append('StaffPicture64', file) 
    fd.append('Id', localStorage.getItem('Id')) 
    fd.append('DepartmentId', localStorage.getItem('DepartmentId')) 
    fd.append('Version', localStorage.getItem('Version')) 

    fetch('api/employees', {method: 'PUT', body: fd}) 
    .then(function (res) { 
    if (res.ok) { 
     $('#myModal').modal('hide') 
     getAll(res) 
    } else { 
     errorRoutine(res) 
    } 
    }) 
}