如何读取项目文件夹 javascript 中的文件？

Question

我正在做一个反应项目。 我在公用文件夹中有一个视频文件。 有一种情况我必须读取文件并将其作为文件发送到服务器。我尝试了下面的代码但它没有用

const readVideo = () => {
      console.log(isDev.current.checked);
      fetch("/images/Sample_2.mp4").then(function (response) {
         console.log(response);
         const reader = new FileReader();
         reader.onload = (e) => {
            console.log(e.target.result);
         };
         reader.readAsDataURL(response.url);
      });
   };

这样做时我收到以下错误

Unhandled Rejection (TypeError): Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Answer 1

您需要将响应传输到 Blob object。

https://developer.mozilla.org/zh-CN/docs/Web/API/Body/blob

const readVideo = () => {
  console.log(isDev.current.checked);
  fetch('/images/Sample_2.mp4')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(myBlob => {
      console.log(myBlob);
      const reader = new FileReader();
      reader.onload = e => {
        console.log(e.target.result);
      };
      reader.readAsDataURL(myBlob);
    })
    .catch(error => {
      console.error(
        'There has been a problem with your fetch operation:',
        error
      );
    });
};

它应该工作。