ajax - 使用 FormData 上传 blob，文件内容为空

Question

我正在尝试在 Chrome 上使用 FormData 上传一个 blob。我正在构建一个网络应用程序。用户可以创建个人资料并选择头像，这是一个 img 标签。当我尝试执行 ajax 请求时，我使用图像构建 Canvas 并在其上调用 toDataURL。然后我使用这个函数将数据转换成二进制内容

    dataURItoBlob: function(dataURI) {
      var binary = atob(dataURI.split(',')[1]);
      var array = [];
      for(var i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i));
      }
      return new Blob([new Uint8Array(array)], {type: 'application/octet-stream'});
    }

创建 blob 后，我将其添加到 formData 并发送 ajax 查询(使用 jquery)。问题是，文件的内容似乎是空的。

 ------WebKitFormBoundarysToAVAYMLPFfJF96
 Content-Disposition: form-data; name="image"; filename="avatar.png"
 Content-Type: application/octet-stream


 ------WebKitFormBoundarysToAVAYMLPFfJF96--

我使用 FileReader 在 blob 上执行 readAsText，它实际上有内容:

 �PNG


 IHDR�
 IDATx^���������v�"�`���^[l��N�����׸�k�؁�X�B�[�i�eٜ����yg����E�dF����o~���{�s�sN(�˲�_t�ɤ����݇ns(Z�6ڇ>�O}}��b��l�����ks�̱��r�w�}��{��x<޲}�Q644XNN�;޷�~k7�|��z��V[[�����o�����rss��WTTXII�UWW[^^^��455Yqq���Ը��ߏ>���Xc
 ���s��o��Yg�ew�y�566��...

有没有人遇到过这个问题？我只是不明白为什么查询发送一个空文件。

Answer 1

Chrome 开发者工具实际上并没有在表单数据中显示文件的内容，请检查服务器端以查看文件是否确实为空。 Firebug (一个 firefox 插件)显示一部分文件数据，你也可以使用像 fiddler 这样的工具。查看 http 帖子正文。