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

Question

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

ajaxwebkitblobform-data

3

我正在尝试在chrome上使用FormData上传blob。

我正在构建一个Web应用程序。

用户可以创建个人资料并选择头像，这是一个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并使用jQuery发送ajax查询。问题是，文件的内容似乎为空。

 ------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��...

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

- Elendir

Chrome开发者工具实际上不会显示表单数据中文件的内容，你的服务器端脚本是否收到了一个空文件？ - Musa

我不是开发服务器脚本的人。我会问服务器开发人员，但我认为你是正确的。有没有办法在开发者工具中记录文件？无论如何，您可以将您的评论发布为答案，以便我接受它吗？ - Elendir

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Musa · Accepted Answer

Chrome开发者工具实际上不会显示表单数据中文件的内容，请检查服务器端以确定文件是否为空。Firefox插件Firebug 可以显示部分文件数据，您还可以使用fiddler等工具查看HTTP POST请求正文。