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

最新推荐文章于 2024-02-17 12:01:37 发布

秀菜

最新推荐文章于 2024-02-17 12:01:37 发布

阅读量463

点赞数 6

分类专栏： nodejs 文章标签： express javascript 数据库 mongodb 音视频 node.js

本文链接：https://blog.csdn.net/mhw200274/article/details/134512633

版权

nodejs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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;