express写视频上传接口

2024 年 07 月 18 日

222 次浏览

1547字数

##### 一、后端 express
###### 1、需要安装 multer 包
```
npm install multer
```
###### 2、写 POST 上传接口
```js
/* POST 上传视频 */
const multer = require('multer');
// 设置存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'public/video/') // 确保这个文件夹已经存在
  },
  filename: function (req, file, cb) {
    cb(null, `${file.fieldname}-${Date.now()}-${file.originalname}`)
  }
})
const upload = multer({ storage: storage });

router.post('/setVideo', upload.single('file'), function(req, res, next) {
  let token = req.headers['x-access-token'];
  if(!token) {
    return res.send({code: 4004, data: [], msg: '上传失败，token缺失'});
  }
  if (!req.file) {
    return res.send({code: 4004, data: [], msg: '上传失败，参数缺失'});
  }
  jwt.verify(token,config_text.jwtSecretKey,(err,results,fields) => {
    if(err) {
      res.send({code: 4000, data: [], msg: '上传失败，token已失效'});
    } else {
      let file = req.file;
      let path = file.path;
      let parts = path.split('\\');
      let filename = parts.pop();
      res.send({code: 2000, data: {url:  `http://127.0.0.1:5000/public/video/${filename}`}, msg: '上传成功'});
    }
  })
});
```
> jwt 库是 token 验证的，不需要可以去掉

##### 二、前端 vue3
###### 1、需要安装 axios 包调用接口
```
npm install axios
```
###### 2、调接口
```js
// 上传视频
export function apiSetVideo(data) {
  return request({
    url: '/setVideo',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}
```
> 封装导出 request 函数调用（封装方法可自行百度）

最后修改：2024 年 08 月 02 日