Html 通过Chrome上的XHR发送图像文件

我正在使用HTML5拖放从用户的计算机上获取图像，并希望将它们上传到我的Rails服务器（在这一端使用Carrierwave）。我不知道我到底在这里做什么，但根据这些指令拼凑出了这些代码

这返回一个500错误-有人能看一下并帮我解决我做错了什么吗

var files = e.dataTransfer.files;
if (files.length){
  for (var i = 0; i<files.length; i++) {
    var file = files[i];
    var reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = function() {
      var bin = reader.result;
      var xhr = new XMLHttpRequest();
      var boundary = 'xxxxxxxxx';
      xhr.open('POST', '/images?up=true&base64=true', true);
      xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
      xhr.setRequestHeader('UP-FILENAME', file.name);
      xhr.setRequestHeader('UP-SIZE', file.size);
      xhr.setRequestHeader('UP-TYPE', file.type);
      xhr.send(window.btoa(bin));
    };
  };
};

var files=e.dataTransfer.files；
if（files.length）{
对于（var i=0；i来说，有几件事可能是罪魁祸首。您将文件作为二进制字符串读取，然后创建一个多部分请求，然后发送一个base64编码值

无需读取文件或使用base64编码。只需构造一个
FormData
对象，附加文件，然后使用
xhr.send（FormData）
直接发送。请参阅我的回答