如何讀取項目文件夾 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
      );
    });
};

它應該工作。