前端使用 Vue cli4.0 element , 后端使用node+express
1.前言
写这篇文章主要是因为做项目被视频搞了好几天，终于在昨天成功了！想来这里分享下自己的喜悦以及方法。
2.上传视频
HTML代码：
```
<el-upload class="upload-demo"
drag
multiple
:http-request="upload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip"> 只能上传jpg/png文件，且不超过500kb </div>
</el-upload>```注意::http-request="upload" 为手动上传事件，调用函数upload() ,覆盖默认的action
Js + axios 分装
upload(item)
{
let formData = new FormData();
formData.append("file", item.file);
axios({
url: "/bao", // 接口
method: "post",
data: formData,
processData: false // 告诉axios不要去处理发送的数据(重要参数)
}).then(res => {
this.setSrc(res.data.data); // 返回视频连接地址
});前后端连接会涉及跨域问题，大家最好自己先配好。
3.播放视频
HTML：
<video
id="myVideo"
class="video-js vjs-big-play-centered"
controls poster="../../assets/p3.jpg"> // 封面
<source :src="this.$route.params.url" /> // 通过路由传递过来的视频链接
</video>JS:
initVideo()
{
let myPlayer = videojs("myVideo", {
muted: true,
controls: true / false,
width: 800,
height: 400,
loop: true }).ready(function() {
let myPlayer = this; //
myPlayer.src(this.$route.params.url);
myPlayer.load();
myPlayer.play();
});}视频插件基于 videoJs 需要提前下载好，并且引用
import videojs from "video.js";import "video.js/dist/video-js.css";4.后端代码
const express = require('express');
const router = express.Router();
const multiparty = require('multiparty')
let path="",inputFile="";
router.post('/',function(req,res,next){
let form = new multiparty.Form({uploadDir:'upload'});
form.parse(req,function(err,fields,files){
inputFile = files.file[0].path;
let uploadPath = inputFile.path;
let dstPath = '/upload/'+inputFile.originalFilename;
files.file.path = dstPath;
let port =9999
path = 'http://localhost:'+port+"/"+inputFile; // 传递会视频地址。
path = path.replace(/\\/g,"/");
res.send({
status:'200',
data:path,
message:"处理成功！"
}); res.end();
})
})
module.exports = router;
