正在上载带有FormData的blob，文件内容为空

Question

我正试图在chrome上上传一个包含FormData的blob。我正在开发一个网络应用。用户可以创建一个配置文件并选择一个化身，这是一个img标签。当我尝试执行一个ajax请求时，我会用该图像构建一个画布，并在其上调用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（火狐插件）显示了一部分文件数据，你也可以使用像fiddler这样的工具来查看超文本传输协议的帖子正文。