使用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>
<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.append("file", file.file);
formData.append("id", this.form.id);
this.loading = true;
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>