使用Multer上传视频并通过GCD同步至YouTube频道时遭遇TypeError: Cannot read property 'file' of undefined错误的技术求助

Hey there, let's fix that error first and then work through other hidden issues in your code:

1. Fix the Immediate TypeError (Root Cause) #

The error Uncaught TypeError: Cannot read property 'file' of undefined comes from a syntax mistake in your frontend handleSubmit function. You used a dot . instead of a comma , when calling FormData.append(), which makes JavaScript try to access a form property on the string "videoFile"—that property doesn't exist, hence undefined.

Here's the corrected handleSubmit code:

const handleSubmit = (event) =>{
  event.preventDefault();
  const videoData = new FormData();
  videoData.append("videoFile", form.file); // Fixed comma here
  videoData.append("title", form.title);    // And here
  videoData.append("description", form.description); // And here
  axios.post("http://localhost:3000/upload", videoData) // Fixed port to match backend's 3000
    .then(response =>{
      console.log(response.data);
    })
    .catch(err => console.error("Upload failed:", err)); // Added error handling for debugging
}

2. Fix React-Specific Attribute Issues #

In React, we can't use class or for as attributes (they're reserved JavaScript keywords). Update your form elements to use React-compatible names:

return (
  <div>
    <h1>Welcome to Tech Pose Tube !!!</h1>
    <form className="w-25" onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="exampleInputTitle">Title</label>
        <input type="text" className="form-control" placeholder="Enter the title of your video" onChange={handleChange} name="title" />
      </div>
      <div className="form-group">
        <label htmlFor="exampleInputDescription">Description</label>
        <textarea className="form-control" onChange={handleChange} name="description" />
      </div>
      <div className="form-group">
        <label htmlFor="exampleFormControlFile1">Choose your video file</label>
        <input type="file" accept="video/mp4" onChange={handleChange} name="file" />
        <br />
        <button type="submit" className="btn btn-primary"> Submit </button>
      </div>
    </form>
  </div>
);

3. Fix Backend Bugs That Will Break Later #

Even after fixing the frontend, your backend has several typos and misconfigurations that will cause failures:

• Port mismatch: Your backend listens on port 3000, but your original frontend called 3001. I fixed the frontend URL above, or you can change the backend's port variable to 3001.
• OAuth scope typo: https://wwww.googleapis.com/auth/youtube.uplaod → should be https://www.googleapis.com/auth/youtube.upload (extra 'w' + misspelled "upload")
• Youtube API attribute errors: You misspelled resource and forgot to pass the title/description to the upload request:

  youtube.insert({
    snippet: { // Fixed property name and added title/description
      title: title,
      description: description
    },
    status : {privacyStatus : 'private'},
    part : 'snippet,status',
    media: {
      body : fs.createReadStream(filename)
    }
  },(err, data) =>{
    if(err) return console.error("Youtube upload error:", err);
    console.log("Upload completed successfully!", data);
    // process.exit(); // This will kill your server—remove unless you intend this
  })
  

• OAuth config typo: redirect_url → should be redirect_uri (correct parameter name for the youtube-api):

  const oAuth = youtube.authenticate({
    type: "oauth",
    client_id : credentials.web.client_id,
    client_secret : credentials.web.client_secret,
    redirect_uri : credentials.web.redirect_uris[0], // Fixed here
  })
  

• Multer upload path: Storing videos in your project root (./) is messy. Create an uploads folder and update multer:

  const storage = multer.diskStorage({
    destination: './uploads', // Ensure this folder exists in your project!
    filename(req, file, cb){
      const newFileName = `${uuid()}-${file.originalname}`
      cb(null, newFileName);
    }
  })
  

4. Bonus: Improve Code Quality #

• Switch your axios import to ES6 style for consistency with React:

  import axios from 'axios';
  

• Add validation in the frontend to ensure a file is selected before submitting the form.

内容的提问来源于stack exchange，提问作者Rev99