使用 Multer 上传视频时出现错误"TypeError: Cannot read property 'file' of undefined"

Question

任务是从桌面上选择一个视频文件并将其上传到网站。然后，这个视频文件将自动上传到您使用GCD提供的Youtube频道。

我得到的错误是"；react dom.development.js:4091未捕获类型错误：无法读取未定义的属性"file"在handleSubmit(App.js:30(中"；

以下是后端代码：

const express = require("express")
const youtube = require("youtube-api");
const uuid = require("uuid")
const cors = require("cors");
const open = require("open");
const multer = require("multer")
const fs = require("fs")
const credentials = require("./GCD credentials.json.json")
const app = express();

app.use(express.json());
app.use(cors());
const storage = multer.diskStorage({
destination: './',
filename(req, file, cb){
const newFileName = `${uuid()}-${file.originalname}`
cb (null, newFileName);
}
})
const uploadVideo = multer({
storage : storage
}).single("videoFile")
app.post('/upload' , uploadVideo, (req, res) =>{
if (req.file) {
const filename = req.file.filename;
const {title, description} = req.body;
open(oAuth.generateAuthUrl({
access_type : 'offline',
scope: "https://wwww.googleapis.com/auth/youtube.uplaod",
state : JSON.stringify({
filename,
title,
description
})
}))
}
})
app.get('/oauth2callback', (req,res) =>{
res.redirect("http://localhost:3001/Success")
const {filename, title, description}  = JSON.parse(req.query.state);
oAuth.getToken(req.query.code, (err, tokens) =>{
if (err) {
console.log(err);
return;
}
oAuth.setCredentials(tokens);
youtube.insert({
resorces:{
// Again in documentation
snippet: {title, description},
status : {privacyStatus : 'private'}
},
part : 'snippet,status',
media: {
// fs(file sysytem) is used for uploading
body : fs.createReadStream(filename)
}
},(err, data) =>{
console.log("Done finally. You acn exit");
process.exit();
})
})
})
const oAuth = youtube.authenticate({
type: "oauth",
client_id : credentials.web.client_id,
client_secret : credentials.web.client_secret,
redirect_url : credentials.web.redirect_uris[0],
})
const port = 3000;
app.listen(port, () =>{
console.log(`App is running ${port}`);
})

这是前端代码：

import React, { useState } from "react";
const axios = require('axios').default;
const App = () => {
const [form, setForm] = useState({
title: "",
description: "",
file: null,
});
const handleChange = (event) =>{
const inputValue = event.target.name === "file" ? event.target.files[0] : event.target.value;
setForm({
...form,
[event.target.name] : inputValue
})
}
const handleSubmit = (event) =>{
event.preventDefault();
const videoData = new FormData ();
videoData.append("videoFile".form.file);
videoData.append("title".form.title);
videoData.append("description".form.description);
axios.post("http://localhost:3001/upload", videoData)
.then(response =>{
console.log(response.data);
})
}

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

Answer 1

正如错误所说：

"react-dom.development.js:4091 Uncaught TypeError: Cannot read property 'file' of undefined at handleSubmit (App.js:30)"

这是前端代码的问题。我在这部分看到一个拼写错误，你应该把"替换掉"通过">

videoData.append("videoFile".form.file); //---> should be videoData.append("videoFile", form.file);
videoData.append("title".form.title); // same as above
videoData.append("description".form.description); // same as above

这里的文件以备不时之需。

另一个问题是，您正在侦听后端代码中的端口3000，因此发送请求的前端代码应该是：

axios.post("http://localhost:3000/upload", videoData);