我正在通过快速服务器将视频上传到反应的公共文件夹并使用钩子作为文件名。如果它是一个大的视频文件,上传后反应播放器开始正确播放。但是如果文件很小,播放器不会运行它,我必须在一段时间后重新加载它才能工作。此外,如果在大文件之后上传小文件,则会返回无法满足的错误范围。反应球员:
<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');
});
})