element ui的upload上传视频内容

正好自己在做一个项目，然后用到了上传视频的内容，但是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)
	})

这就是这视频上传的基本内容了。