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

Question

我正在尝试在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并发送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 post机构.