fileReader.readAsBinaryString（file） "Blob"タイプでないパラメータのために画像のアップロードを妨げる

Question

デフォルトの割り当てられた画像を正しく表示するモーダル内で使用するために画像をアップロードしようとしていますが、エラー。このコードブロックに

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'.(…)

：ブレークポイントがここで設定されている場合、私は、このエラーメッセージが返されます。

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

：1は完全に働くだろうと、彼らは両方とも、私は間違いなく.htmlのページに持っている「#fileUpload」タグを除き、外部入力を使用していないとき、別のエラーを返しているだろう、なぜ私は理解していません

なぜこれが起こっていますか？ 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) 
    } 
    }) 
}