400 錯誤請求 MP4（Express、Node、React、mongoDB）

Question

我正在嘗試流式傳輸我計算機上的 mp4 文件。 我可以上傳和刪除文件。 上傳完成后點擊鏈接。 它將我路由到頁面，我只看到 {}。 我收到以下錯誤：

GET http://localhost:8000/read/c94e2bfe215bb8821c5c8dc22c8dc1b4.mp4 400 (Bad Request)
favicon.ico:1          GET http://localhost:8000/favicon.ico 404 (Not Found)

我什至上傳了一張圖片來檢查 mp4 文件是否太大，但圖片也沒有加載。 這是我的服務器代碼：

// route for streaming a file
app.get('/read/:filename',async(req,res)=>{

  const{filename}= req.params
  try{
    const readstream = await gfs.createReadStream({filename})
    res.header("Content-Type","video/mp4");
    res.header("X-Content-Type-Options", "nosniff");
    res.header("Accept-Ranges", "bytes");
    res.header("Content-Length",903746);
    readstream.pipe(res)
  }catch(err){
    res.status(400).send(err)
  }

})

這是反應的代碼

function App() {
  const [file, setFile] = React.useState(null);
  const [files, setFiles] = React.useState([]);

  const filehandler = (e) => {
    if (e.target.files != null || e.target.files[0] != null) {
      setFile(e.target.files[0]);
    }
  };

  const uploadFile = async (e) => {
    e.preventDefault();
    if (file) {
      const fd = new FormData();

      fd.append("file", file);

      const res = await axios.post("http://localhost:8000/upload", fd);
      setFiles(files.concat(res.data))

      
    }
  };

  const fetchFiles = React.useCallback(async () => {
    const res = await axios.get("http://localhost:8000/files");
    setFiles(res.data);
  }, []);

  const removeFile = React.useCallback(
    async (filename, index) => {
      const res = await axios.delete(
        `http://localhost:8000/delete/${filename}`
      );
      if (res.status === 200) {
        let temp = [...files];
        console.log(temp);
        temp.splice(index, 1);

        setFiles(temp);
      }
    },
    [files]
  );

  React.useEffect(() => {
    fetchFiles();
  }, [fetchFiles]);

  return (
    <div className="App">
      <form className="Form" onSubmit={uploadFile}>
        <input type="file" onChange={filehandler} />
        <button type="submit">upload</button>
      </form>
      <div className="Media">
        {files.map((file, i) => (
          <div key={file._id} className="Item">
            <a
              className="Link"
              href={`http://localhost:8000/read/${file.filename}`}
            >
              {file.filename}
            </a>
            <button
              type="button"
              onClick={() => {
                removeFile(file.filename, i);
              }}
            >
              remove
            </button>
          </div>
        ))}
      </div>
    </div>
  );}

Answer 1

您的路由器在捕獲異常后發送 400。 在您的catch塊中使用console.log(err)打印異常消息以確定究竟出了什么問題，它try塊的代碼