axios Javascript将文件转换< input>为二进制文件

kokeuurv 于 2022-11-05 发布在 iOS

关注(0)|答案(2)|浏览(145)

我尝试将文件从输入元素转换为原始的二进制数据，然后在axios的帮助下将其上传到服务器。put
在我看来，代码的主要/有问题的部分是：

const file = document.getElementById('file').files[0]

  async function getBinaryFromFile(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.addEventListener('load', () => resolve(reader.result))
      reader.addEventListener('error', (err) => reject(err))
      reader.readAsBinaryString(file)
    })
  }

  const binary = await getBinaryFromFile(file)

  const config = {
      data: binary,
      signal: controller.value.signal
   }

  axios.put(`${url}/${uuid}/file/${file.name}`, binary, config)

这是I console.log（二进制）的输出：

-----------------------------220913591021183570121419664829
内容处置：表格数据;名称=“数据”;文件名=“附加-1.pdf”
内容类型：应用程序/pdf
%PDF-1.5% PDF-4 0对象/长度5 0 R /过滤器/扁平解码
stream x��}[�f7r��S�z��; ��r1�8��a��#;�{2�?\kU��N�zz$��Nշ77Y��dx��a�'��w}�~��u��;�1��_=��ӷ�x�e��[ZP�/)��{��o��#<��o�{��_��w칔��u?�r��7��W��?{��#�Q��|�_rK��1��%�q'�w��C��8^�(�cx��R�\�ܝ��;��s��/c��|ꉈ~��k��1��p �|虈��@��Bj�*/�7{x�a��ǅ��&��8��p"��b��(�nV�c��>�۰��Qo�� |�U��J�CԻ�勤��E��O֙:��ϳ� �Z��^��t��S�SQC�_ ��~��&9C��.+/#tc��*pr��S��M�=g�\�vH��= |�!��K�q��&!��$��yL��OG��zW��[to� Ik��p��mb0� ��H!+�� RB��[�`~�\�<1ar�dQ�'��D(�DLEB�^��~\��=��a�u,��Ĺ� ��'�J��>��Q>e��[�................
如果我从服务器下载文件后，我得到一个错误，它无法显示或一个空白的PDF。我在这里做错了什么？为什么我得到这个胡言乱语？

axios

来源：https://stackoverflow.com/questions/73744736/javascript-transform-input-file-to-binary

2条答案

按热度按时间

nwnhqdif1#

记住，“二进制字符串”是一个包含值的字符串，这些值在字体中可能没有与之关联的字形。
也就是说，readAsBinaryString不是我在新代码中要做的事情（而且在任何情况下，都没有理由在config.data属性中提供数据 * 作为参数 * 和 *）。File对象是Blob，axios可以将blob作为data来处理：

const file = document.getElementById("file").files[0];

const binary = await getBinaryFromFile(file);

const config = {
    data: file, //***
    signal: controller.value.signal,
};

axios.put(`${url}/${uuid}/file/${file.name}`, config);

赞(0）回复(0）举报 2022-11-05

pkln4tw62#

解决方案是相当容易的，而不是使用reader.readAsBinaryString(file)，我使用reader.readAsArrayBuffer(file)，它的工作就像一个魅力。

赞(0）回复(0）举报 2022-11-05