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（file）;线。当在此处设置断点时，我收到此错误消息：

Uncaught TypeError：无法在'FileReader'上执行'readAsBinaryString'：参数1不是'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)
    }
  })
}

fileReader.readAsBinaryString（file）因参数不是类型“Blob”而阻止图像上传

1 个答案: