vant-upoader 视频录制上传

使用vant-upoader录制视频上传

<template>
<div style="width: 100%;text-align: center;">
 <van-uploader
   upload-icon="https://file.baojunev.com/group1/default/20210527/14/51/6/[email protected]"
   accept="video/*"
   :before-read="beforeRead"
   :after-read="afterRead"
    capture="camera"
    :deletable="false" /**显示自定义上传组件样式，隐藏原有上传样式，如果不需要自定义可以去掉该属性**/
 >
 /**自定义上传按钮插槽**/
  <template slot="default">
    <div class="btn-start">
       <span>{
    
    {
    
     content }}</span>
       <van-icon name="award-o"/>
    </div>
  </template>
 </van-uploader>
 </div>
 <div style="text-align: center;padding: .3rem .4rem;font-size: .4rem;">
    请将手机放置合适位置
    要求能拍摄到开标现场活动
 </div>
 /**自定义loading加载框**/
 <van-popup style="background-color: transparent;width: 50px;height: 50px;" v-model="loading" get-container="#app" :close-on-click-overlay="false" >
     <van-loading size="40" color="#1989fa" />
 </van-popup>
</template>
<script>
export default {
    
    
data(){
    
    
	return{
    
    
		loading:false,
		content:"开始录制"
	}
}
methods:{
    
    
	//上传前回调
	beforeRead(file) {
    
    
      if (!file.type.includes("video")) {
    
    
        this.$toast.fail('请上传视频文件');
        return false;
      } else if (file.size > 400 * 1024 * 1024) {
    
    
        this.$toast.fail('视频大小超过限制');
        return false;
      } else {
    
    
        return true;
      }
    },
    //上传成功后回调
    afterRead(file) {
    
    
      const that = this;
      let formData = new FormData(); // 为上传文件定义一个formData对象
      formData.append("file", file.file);
      formData.append("id", this.form.id);//如需传递额外参数，例如id：this.form.id
      this.loading = true; 
      //$_uploadAction为请求方法，请使用自己项目中的axiox请求
      //这里需要注意的是'Content-Type'必须为'application/form-data',
      this.$_uploadAction('post', "/tender/bidItems/uploadVideo", formData, (data) => {
    
    
        if(data.success){
    
    
          that.loading = false;
          this.$toast.success('上传成功！');
          this.form.businessVedioAddress = data.message;
        }else{
    
    
          this.$toast.fail(data.message);
        }
      }).catch(function (data) {
    
    
        this.$toast.fail(data.message);
        console.log("data", data);
      });
    },
  }
}
<style lang="less" scoped>
.btn-start {
    
    
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #2a44e5;
  color: #fff;
  font-size: .4rem;

  .van-icon {
    
    
    margin-top: .2rem;
    font-size: .8rem;
  }
}
</style>