无法在客户端填充缩略图

Question

router.post("/thumbnail",(req,res)=>{

  let thumbsFilePath="";
  let fileDuration="";



  ffmpeg.ffprobe(req.body.filePath, function(err,metadata){
    console.dir(metadata);
    console.log('METADATA==>'+metadata);
    console.log(metadata.format.duration);

    fileDuration=metadata.format.duration;

  })

  
  ffmpeg(req.body.filePath)
  .on('filenames', function(filenames) {
    console.log('Will generate ' + filenames.join(','))
    thumbsFilePath="uploads/thumbnails/"+ filenames[0];
  })
  .on('end', function() {
    console.log('Screenshots taken');
    console.log('FILEPATH===>'+thumbsFilePath);
    console.log('FILEDURATION===>'+fileDuration);
    return res.json({success: true, thumbsFilePath , fileDuration})
  })
  .screenshots({
    // Will take screens at 20%, 40%, 60% and 80% of the video
    count: 3,
    folder: 'uploads/thumbnails/',
    size:'320x240',
    // %b input basename ( filename w/o extension )
    filename:'thumbnail-%b.png'
  });
})

屏幕截图完美保存，它们的路径也从thumbsFilePath 接收到客户端，但我无法在客户端页面中填充它（反应）.. idk 我在这里做错了什么。

这里是客户端代码。我用usestate

  const [FilePath, setFilePath]= useState('');
  const [Duration, setDuration] = useState('');
  const [Thumbnail, setThumbnail] = useState('');

当我尝试填充 img 时出现错误

const onDrop=(files)=>{
      let formData= new FormData();
      let config={
        header:{'content-type':'multipart/form-data'}
      }
      
      formData.append("file",files[0])
      Axios.post('http://localhost:5000/api/video/uploadFiles',formData,config)
      .then(response=>{
        console.log(response);
     if(response.data.success){
       console.log('FILEPATH==>'+response.data.filePath);
       console.log('filename==>'+response.data.fileName);
      let variable={
        filePath:response.data.filePath,
        fileName:response.data.fileName
      }
      setFilePath(response.data.filePath);
      Axios.post('http://localhost:5000/api/video/thumbnail',variable)
      .then(response=>{
        if(response.data.success){
          setDuration(response.data.fileDuration)
          setThumbnail(response.data.thumbsFilePath)
        }else{
          alert("failed to make thumbnails");
        }
      })
     }
      }).catch(err=>{
        console.log('error'+err);
      })
  }
  
    return (
      <>
        <form>
        <Dropzone  onDrop={onDrop}>
  {({getRootProps, getInputProps}) => (
    <section>
      <div className="dropzone__container" {...getRootProps()}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>
 
    {Thumbnail !== "" &&
     <div>
       <img src={`http://localhost:5000/server/${Thumbnail}`} alt="haha"/>
     </div>
    }

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}config: {url: "http://localhost:5000/api/video/uploadFiles", method: "post", data: FormData, headers: {…}, transformRequest: Array(1), …}data: {success: true, fileName: "SampleVideo_1280x720_1mb.mp4", filePath: "uploads\SampleVideo_1280x720_1mb.mp4"}headers: {content-length: "109", content-type: "application/json; charset=utf-8"}request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}status: 200statusText: "OK"__proto__: Object
UploadVideo.js:51 FILEPATH==>uploads\SampleVideo_1280x720_1mb.mp4
UploadVideo.js:52 filename==>SampleVideo_1280x720_1mb.mp4
thumbnail-SampleVideo_1280x720_1mb_1.png:1 GET http://localhost:5000/server/uploads/thumbnails/thumbnail-SampleVideo_1280x720_1mb_1.png 404 (Not Found)
but the thumbnail is in that directory..but it says not found.and it shows the "alt"(haha) in browser.`enter code here`
(C:\Users\chidori\Desktop\project\server\uploads\thumbnails\thumbnail-SampleVideo_1280x720_1mb_1.png).

对不起，混乱的演示文稿..

Answer 1

检查您是否能够在该物理位置找到该文件。我的意思是在server/uploads/thumbnails 文件夹内？因为它在浏览器控制台中显示 404。