Question

我正在通过Express服务器上传视频以响应公共文件夹，并使用钩子作为文件名。如果视频文件很大，上传后，react播放器将开始正确播放。但是，如果文件很小，播放器将无法运行它，并且我必须在一段时间后重新加载，然后它才能工作。同样，如果在大文件之后上传小文件，则会返回无法满足的错误范围。反应玩家：

<ReactPlayer
      url={
        filePath
      }
      class="react-player" width="100%"
      ref={ref}
      controls={true}
      onDuration={setDuration}
    />

Axios连接：

useEffect(() => {
const request = () => {
  if (serverPath === 'http://localhost:5000/upload') {
    const datatoSend = new FormData()
    datatoSend.append('file', myFile)
    const fetchdata = async () => await axios.post(serverPath, datatoSend, {
      onUploadProgress: ProgressEvent => {
        setLoaded(ProgressEvent.loaded / ProgressEvent.total * 100)
      }
    })
    const result = fetchdata()
     result.then(res => {

      if (res.data ==='Server Connected') {
        setFilePath('CurrentMedia.mp4')
      }
    })
  }
 }
}, [serverPath])

快递代码：

app.post("/upload", async (req, res) => {
    console.log('/ route called')

    const file = req.files.file

    await file.mv(`${__dirname}/client/public/CurrentMedia.mp4`, (err) => {
    if (err) {
        console.error(err);
        return res.status(500).send(err);
    }
    res.send('Server Connected');
 });

}）

Answer 1

每次上传新文件时，我都可以通过使用不同的名称保存文件来解决此问题。问题出在react-player试图运行一个同名的新视频文件上。由于文件名相同，因此运行的是以前缓存的文件。

只需在express中执行此操作并在react中更新钩子即可分别对其进行修复

app.post("/upload",  async (req, res) => {
console.log('/ route called')

const file = req.files.file
const name = file.name

file.mv(`${__dirname}/public/${name}`, (err) => {
if (err) {
  console.error(err);
  return res.status(500).send(err);
}
res.send('Server Connected');
console.log('Server Connected')
});
})

反应播放器上传和播放新视频

1 个答案: