正好自己在做一个项目,然后用到了上传视频的内容,但是element ui默认的上传内容是图片,所以要把它改成视频只需要一点改变就行,
<el-upload class="avatar-uploader"
:action="uploadUrl"
:show-file-list="false"
:on-success="handleVideoSuccess"
:on-progress="uploadVideoProcess"
:before-upload="beforeUploadVideo"
>
<video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
<i v-else-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
<!-- 进度条 -->
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
</el-upload>
上面是样式的内容,然后还要进行一些before-upload上传之前的验证,on-progress上传进度,on-success上传成功后的内容
videoForm:{
Video:'',
videoUploadPercent:'',
videoUploadId:'',
},
videoFlag:false,
uploadUrl: "http://localhost:3000/admin/upload", //你要上传视频到你后台的地址
上面这个是data里面的基本数据,下面是验证,进度,上传后操作
uploadVideoProcess(event, file, fileList){
this.videoFlag = true;
this.videoUploadPercent = parseInt(file.percentage.toFixed(0))
},
beforeUploadVideo(file) {
const isLt10M = file.size / 1024 / 1024 < 10;
if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt10M) {
this.$message.error('上传视频大小不能超过10MB哦!');
return false;
}
}
//上传成功方法
handleVideoSuccess(res, file) {
this.videoFlag = false;
this.videoUploadPercent = 0;
this.videoForm.videoUploadId = res.filename
this.videoForm.Video = res.url;
},
这些主要是前台内容的验证,后台服务器我用的是node,所以我把node的相关内容也放在下面,主要有一个uploads文件夹用来存放上传的视频内容,这个http://localhost:3000/admin/upload就是请求的地址,然后下载一个multer用来解析文件,将文件存入uploads内,将文件信息发送到前端然后就能通过传的url来进行访问这个视频,但是要记住把存视频的文件夹暴露出去,否则会出现404的错误,找不到内容
const multer =require('multer')
const upload = multer({ dest: __dirname + '/../uploads' })
app.post('/admin/upload',upload.single('file'),async(req,res)=>{
const file = req.file
file.url = `http://localhost:3000/uploads/${file.filename}`
res.send(file)
})
这就是这视频上传的基本内容了。