上传视频文件和字幕文件到MongoDB

Question

// backend/server.ts
import express, { Application, Request, Response } from 'express';
import mongoose from 'mongoose';
import cors from 'cors';
import dotenv from 'dotenv';
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })
const { mongoDBURL } = require('./config');

dotenv.config();

const app: Application = express();

// Middleware
app.use(cors());
app.use(express.json());

// Database connection
const MONGODB_URI = mongoDBURL;

mongoose.connect(MONGODB_URI)
.then(() => console.log("MongoDB connection established"))
.catch(error => console.error("MongoDB connection failed:", error.message));

// Routes
app.get('/', (req: Request, res: Response) => {
  res.send('Hello from Express + TypeScript Server');
});

// Start server
const PORT: number | string = process.env.PORT || 5001;
app.listen(PORT, () => {
  console.log(`Server is running on port: ${PORT}`);
});

app.post('/upload', upload.fields([{ name: 'video', maxCount: 1 }, { name: 'subtitle', maxCount: 1 }]), (req: Request, res: Response) => {
  const files = (req as any).files; // Use type assertion here
  if (files) {
    res.send({ message: 'Files uploaded successfully.', files: files });
  } else {
    res.status(400).send({ message: 'File upload failed.' });
  }
});

我正在尝试同时上传 1 个视频文件和 1 个字幕文件到我的 mongo 数据库。我对此很陌生，所以如果我的代码很糟糕，我很抱歉。当我尝试上传文件时，我收到一条控制台消息，表示上传成功并显示了一些数据。

const UploadComic: React.FC = () => {
  // State to store the uploaded files
  const [videoFile, setVideoFile] = useState<File | null>(null);
  const [subtitleFile, setSubtitleFile] = useState<File | null>(null);

  // Handlers for file selection
  const handleVideoFileSelect = (file: File | null) => {
    setVideoFile(file);
  };

  const handleSubtitleFileSelect = (file: File | null) => {
    setSubtitleFile(file);
  };

  // Inside your component
  const handleAddToLibrary = () => {
    if (!videoFile || !subtitleFile) {
      alert('Missing files');
      return;
    }
  
    const formData = new FormData();
    formData.append('video', videoFile); // Assuming 'video' is the field name expected by the server
    formData.append('subtitle', subtitleFile); // Assuming 'subtitle' is the field name expected by the server
  
    axios.post('http://localhost:5001/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((response) => {
      console.log('Files uploaded successfully1', response.data);
      // Handle success
    })
    .catch((error) => {
      console.error('Error uploading files', error);
      // Handle error
    });
  };

我不确定我做错了什么，但它不会上传到 mongodb，它确实上传过一次，但我无法复制发生的事情。如果您有任何建议，或者即使我的代码很糟糕，那也会有帮助，重要的是要注意我已向 chatgpt 寻求帮助，因此任何随机代码都可能由此引起。

我尝试了几种不同的方法，但我期望它上传或抛出错误，但都没有发生。

Answer 1

需要完成Express中的后处理程序。你只是检查是否有文件；如果是这样，您将用

res.send({ message: 'Files uploaded successfully.', files: files });

进行响应，否则您将用

res.status(400).send({ message: 'File upload failed.' });

进行响应 没有像保存在数据库中那样编写数据库逻辑。

你可以尝试这样的事情：

import fs from 'fs';

app.post('/upload', upload.fields([{ name: 'video', maxCount: 1 }, { name: 'subtitle', maxCount: 1 }]), async (req: Request, res: Response) => {
  const files = (req as any).files;

  if (files.video && files.subtitle) {
    const videoFile = files.video[0];
    const subtitleFile = files.subtitle[0];
   
    const video = new File({
      name: videoFile.originalname,
      contentType: videoFile.mimetype,
      data: fs.readFileSync(videoFile.path),
    });

    const subtitle = new File({
      name: subtitleFile.originalname,
      contentType: subtitleFile.mimetype,
      data: fs.readFileSync(subtitleFile.path),
    });

    try {
      await video.save();
      await subtitle.save();
      res.send({ message: 'Files uploaded and saved to MongoDB successfully.' });
    } catch (error) {
      console.error("Error saving files to MongoDB", error);
      res.status(500).send({ message: 'Failed to save files to MongoDB.' });
    }
  } else {
    res.status(400).send({ message: 'File upload failed.' });
  }
});

这是一种通用方法，因为我是在旅途中写的。请将新的 File 构造函数替换为您拥有的架构，并根据您的应用程序的功能逻辑进行修改。