nodejs express框架+multer+mongodb数据库中实现视频上传

1、安装好 nodejs 和 express +multer+mongodb

2、这是我的结构

3、在model文件夹下的db,js连接地址后面添加

{ useNewUrlParser: true, useUnifiedTopology: true }

4、 在model文件夹下的model.js文件配置模型

const VideoSchema = new mongoose.Schema({

  title: String,

  path: String,

});

5、在根目录app.js中配置导入

var multer = require('multer');

注意要配置跨域

const storage = multer.diskStorage({

  destination: (req, file, cb) => {

    cb(null, 'upload/video')//保存视频位置

  },

  filename: (req, file, cb) => {

    cb(null, file.fieldname + '-' + Date.now() + '.mp4')

  }

})

const upload = multer({ storage: storage });

6、 需要在routes文件下配置接口，默认是index.js我这边是home.js

//在文件夹需要导入

const multer = require('multer');

const upload = multer({ dest: 'upload/' })//视频保存地址

//导入定义好的模型文件

//视频接口配置

router.post('/upload', upload.single('video'), async (req, res) => {

  try {

    const { originalname, path } = req.file;

    const video = new VideoModel({

      title: originalname,

      path: path,

    });

    await video.save();

    res.status(201).send('Video uploaded successfully!');

  } catch (error) {

    res.status(500).send(error.message);

  }

});

//前端实现视频上传。我这里使用的是umi2 进行上传操作 ，axios我进行了二次封装没有封装正常导入即可！

import React, { useState } from 'react';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from '../../../../../axios/index';

const UploadPage = () => {
  const [fileList, setFileList] = useState([]);

  const onChange = (info) => {
    let fileList = [...info.fileList];

    // 限制文件上传数量
    fileList = fileList.slice(-1);

    setFileList(fileList);
  };

  const beforeUpload = (file) => {
    // 自定义文件类型和大小的限制
    const isVideo = file.type.startsWith('video/');
    if (!isVideo) {
      message.error('只能上传视频文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 100;
    if (!isLt2M) {
      message.error('视频文件大小不能超过100MB!');
    }
    return isVideo && isLt2M;
  };

  const customRequest = async ({ file, onSuccess, onError }) => {
    try {
      const formData = new FormData();
      formData.append('video', file);

      const response = await axios.post('/home/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });

      if (response.status === 201) {
        message.success('视频上传成功！');
        onSuccess();
      } else {
        message.error('视频上传失败！');
        onError();
      }
    } catch (error) {
      message.error('视频上传失败！');
      onError();
    }
  };

  return (
    <div>
      <Upload
        customRequest={customRequest}
        showUploadList={false}
        beforeUpload={beforeUpload}
        onChange={onChange}
        fileList={fileList}
      >
        <Button icon={<UploadOutlined />}>选择视频</Button>
      </Upload>
    </div>
  );
};

export default UploadPage;