**
切记下载最新版qiniu-js!!!
**
需求效果
html代码
<div class="f2-sub_btn">
<van-button type="primary" block>
<span>开始录制视频</span>
<input
type="file"
accept="video/*"
class="inputvideo"
@change="uploadfile($event)"
capture="camcorder"
/>
</van-button>
</div>
js代码
<script>
import * as qiniu from "qiniu-js";
import { Toast } from "vant";
import store from "../../store";
import axios from "axios";
import Header from "../../components/newhead";
export default {
name: "myCard",
data() {
return {
url: "../../assets/logo.png",
urlfan: "../../assets/logo.png",
value: "",
multipartFile: [],
multipartFilefan: [],
sfghocrplatsrl: "",
sfrzdblatsrl: "",
sfzmocrplatsrl: "",
yxMerchantContent: "",
commonImgUrl: "",
qnToken: "",
custSeqUser: "",
imageBucketname: "",
};
},
computed: {},
methods: {
getQnToken() {//获取qiniu的token等信息
this.post("/personal/getQnToken", {}).then((res) => {
this.commonImgUrl = res.commonImgUrl;
this.qnToken = res.qnToken;
this.custSeqUser = res.custSeq;
this.imageBucketname = res.imageBucketname;
});
},
//图片上传 回显 赋值
uploadfile($event) {
const file = $event.target.files[0];
let uptoken = this.qnToken;//后端通过用户名密码获取到的token
let key = null; //这是上船后返回的文件名,这里为了避免重复,加上了时间戳和随机数
var config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
region: qiniu.region.z1, //选择上传域名区域;当为 null 或 undefined 时,自动分析上传域名区域。 华北地区
domain: this.imageBucketname, //这里是后端返回的Bucket地址
chunkSize: 10, //每个分片的大小,单位mb,默认值3
forceDirect: true, //直传还是断点续传方式,true为直传
};
var putExtra = {
fname: file.name, //文件原始文件名
params: {},
mimeType: [] || null,
// ...config,
};
var observable = qiniu.upload(file, key, uptoken, putExtra, config);
observable.subscribe({
next: (result) => {
//主要用来展示进度
// console.log(result);
Toast.loading({
message: `已上传${result.total.percent.toFixed(0)}%`,
forbidClick: true,
duration: 0,
});
},
error: (err) => {
//上传错误后触发
console.log(err);
Toast.loading({
message: err.message,
forbidClick: true,
duration: 0,
});
setTimeout(() => {
Toast.clear();
}, 1500);
},
complete: (result) => {
//上传成功后触发。包含文件地址。
console.log(result);
this.post("/personal/v1/vivoDetection", {
sfzmocrplatsrl: this.sfzmocrplatsrl,
imageName: result.key,
}).then((res) => {
Toast.clear();
this.$router.replace("/sign");
});
},
});
},
//上传
change(event) {
let file = event.target.files[0];
let videoBase;
//对录制的视频限制大小
if (file.size > 1588608) {
Toast({
message: "录制视频时间过长",
position: "middle",
duration: 1500,
});
return;
} else if (file.size < 211057) {
Toast({
message: "录制视频时间太短",
position: "middle",
duration: 1500,
});
return;
}
let reader = new FileReader();
let that = this;
reader.readAsDataURL(file);
reader.onload = function () {
if (reader.result) {
Toast.loading({
message: "提交中...",
forbidClick: true,
duration: 0,
});
videoBase = reader.result;
//请求后端,传递数据
console.log(videoBase);
that.post("/personal/vivoDetection", {
videoStr: videoBase,
sfzmocrplatsrl: that.sfzmocrplatsrl,
}).then((res) => {
Toast.clear();
that.$router.replace("/sign");
});
} else {
alter("视频录制异常");
}
};
},
queryPlatsrls() {
this.post("/personal/queryPlatsrls", {}).then((res) => {
this.sfghocrplatsrl = res.sfghocrplatsrl;
this.sfrzdblatsrl = res.sfrzdblatsrl;
this.sfzmocrplatsrl = res.sfzmocrplatsrl;
});
},
},
components: {
Header,
},
mounted() {
this.getQnToken();
this.queryPlatsrls();
this.yxMerchantContent = sessionStorage.getItem("yxMerchantContent");
},
created() {},
beforeDestroy() {},
};
</script>