vue element 手动上传视频及表单

template

<el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="名称">
          <el-input v-model="ruleForm.location"></el-input>
        </el-form-item>
        <el-form-item label="添加视频" class="video-upload">
          <el-upload
            class="avatar-uploader"
            action=""
            accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
            :auto-upload= "false"
            :show-file-list="false"
            id = 'video'
            :on-change="handleChangeVideo">
            <video
              v-if="Video !=''"
              :src="Video"
              width="350"
              height="180"
              controls="controls"
            >您的浏览器不支持视频播放
            </video>
            <i
              v-else-if="Video ==''"
              class="el-icon-plus avatar-uploader-icon"
            ></i>            <!--没选择视频之前显示-->
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="close">取消</el-button>
          <el-button type="primary" @click="checkSubmit('ruleForm')">确认</el-button>
        </el-form-item>
      </el-form>

script

export default {
    data() {
      return {
        ruleForm: {
        	location: ''
        },
        Video: ''
      }
    },
    methods:{
    	handleChangeVideo(file) {
	        this.Video = URL.createObjectURL(file.raw)
	        console.log(file)
	        this.ruleForm.file = file.raw
     	 },
     	 checkSubmit() {
	        const formData = new FormData()
	        Object.keys(this.ruleForm).forEach((ele) => {
	          formData.append(ele, this.ruleForm[ele])
	        })
          this.$api.post('v1/video', formData, response => {
            if (response.status >= 200 && response.status < 300) {
              this.$message({
                type: 'success',
                message: '添加成功！'
              })
            } else {
              console.log(response.message);
            }
          });
        } 
    }
}