vant-upoader 视频录制上传

使用vant-upoader录制视频上传

<template>
<div style="width: 100%;text-align: center;"><van-uploaderupload-icon="https://file.baojunev.com/group1/default/20210527/14/51/6/video_icon@2x.png"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.idthis.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>

vant-upoader 视频录制上传相关推荐

WebRtc实现多人视频会议以及视频录制上传
1.前言最近公司做的一个项目需求是实现多人视频会议聊天,查阅资料,决定使用HTML5新支持的WebRtc来作为视频通讯.客户端使用支持HTML5浏览器即可,如chrome,服务器段需要提供两个主要的 ...
php h5视频录制上传,基于koa的h5视频录制异步上传
# 需求 1. h5 录制视频, 2. 异步上传到 node 服务器端 3. 文件保存在服务器端. # 技术选型 ## 前端 - jquery ## 后端 - koa # 技术坑点 ## h5 录制视 ...
微信小程序开发之——仿微信视频录制上传
一仿微信视频录制效果二业务说明视频录制前,只显示取消和视频录制按钮录制开始后,只显示视频录制按钮,并且上方显示时间.录制按钮显示录制进度录制完成后,显示重拍.取消.上传按钮录制完成后,点 ...
html5 视频录制上传视频,怎么上传视频（手把手教你怎么在今日头条录制及上传视频）...
想上传精彩视频与人分享其实很简单,只需要以下几个简单的步骤即可 1.磨刀不误砍柴工,首先要准备录屏软件(如果后期经常剪那你还会需要一个傻瓜式的剪辑软件),没有要推销广告的意思所以软件自行选择能满足使用 ...
iOS 录制视频并上传
调取系统录制视频并上传,获取第一帧显示在界面 1.调取系统摄像 self.imagePicker=[[UIImagePickerController alloc]init]; self.imagePi ...
ionic3 视频选择上传和录制上传
懒得再排版: 选择上传录制上传另附:runtime.ts import { Injectable } from '@angular/core'; import { Platform } from ...
手把手教你制作AppPreview视频并上传到appStore进行审核
手把手教你制作AppPreview视频并上传到appStore进行审核注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...
抖音开放平台-视频切片-视频分片上传-不合法的参数ID-不合法的对象ID
问题描述 1.最近遇到个问题,做业务需要管理几个抖音账号,用抖音开放平台做分片上传视频,多次返回不合法参数id,提交工单之后给的回复没有任何参考价值. 2.例如视频文件按15M进行切片,调用分片上传初 ...
关于uniapp小程序压缩视频后上传云点播视频损坏这件事
问题起因公司自研项目技术栈是 uniapp 开发微信小程序小程序内有个需要用户录制视频并上传的功能项目内使用的是 uni.createCameraContext 相机组件进行录制视频的一开始 ...

vant-upoader 视频录制上传

使用vant-upoader录制视频上传

vant-upoader 视频录制上传相关推荐

最新文章

热门文章