|
|
@@ -0,0 +1,356 @@
|
|
|
+<template>
|
|
|
+ <div class="box">
|
|
|
+ <div class="add" @click="add()">
|
|
|
+ +
|
|
|
+ </div>
|
|
|
+ <!-- <div class="add" @click="add()" v-if="src">
|
|
|
+ <video id='video-play' :src="src" ref="videos"></video>
|
|
|
+ </div> -->
|
|
|
+ <input id="video" ref="add" type="file" accept="video/*" @change="afterRead2(event)" hidden>
|
|
|
+ <div class="tip">
|
|
|
+ 说明：当此最多允许传1G视频,推荐采用MP4、flv格式,可缩短审核转码耗时
|
|
|
+ </div>
|
|
|
+ <van-overlay :show="videoShow" @click="closeVideo">
|
|
|
+ <div class="wrapper flex">
|
|
|
+ <video id='video-play ' :src="src" ref="videos" controls @click.stop></video>
|
|
|
+ <el-button class="btn" type="primary" :loading="btn.loading" @click="getAuth()" @click.stop>{{btn.title}}</el-button>
|
|
|
+ </div>
|
|
|
+ </van-overlay>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import WxMixin from "@/mixins/wx";
|
|
|
+ import "@/assets/css/common.css";
|
|
|
+ import Vue from 'vue';
|
|
|
+ import {
|
|
|
+ Overlay
|
|
|
+ } from 'vant';
|
|
|
+ import {
|
|
|
+ Button
|
|
|
+ } from 'element-ui';
|
|
|
+ import {
|
|
|
+ Uploader,
|
|
|
+ Icon
|
|
|
+ } from 'vant';
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ layout: "opacity_header",
|
|
|
+ async asyncData({
|
|
|
+ $axios,
|
|
|
+ params,
|
|
|
+ req
|
|
|
+ }) {
|
|
|
+ let id = params.id;
|
|
|
+ let headers = req && req.headers;
|
|
|
+ let res = await $axios.$get(
|
|
|
+ `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
|
|
|
+ headers
|
|
|
+ }
|
|
|
+ );
|
|
|
+ if (!res.data) {
|
|
|
+ return {
|
|
|
+ title: "的技术圈主页-程序员客栈"
|
|
|
+ };
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
|
|
|
+ };
|
|
|
+ },
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ title: this.title,
|
|
|
+ script: [{
|
|
|
+ src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mixins: [WxMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ src: '',
|
|
|
+ fileList: [],
|
|
|
+ videoShow: false,
|
|
|
+ uploadInfo: {},
|
|
|
+ file: null,
|
|
|
+ btn: {
|
|
|
+ loading: false,
|
|
|
+ title: '开始上传'
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getAuth();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ //开始上传，
|
|
|
+ getAuth() {
|
|
|
+ let that = this
|
|
|
+ that.btn.loading = true
|
|
|
+ that.btn.title = '读取文件'
|
|
|
+ this.$axios
|
|
|
+ .$post("/api/jishuquan/get_upload_token", {
|
|
|
+ file_name: 'test.mp4'
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ that.uploadInfo = {
|
|
|
+ 'uploadAuth': res.data.UploadAuth,
|
|
|
+ 'uploadAddress': res.data.UploadAddress,
|
|
|
+ 'videoId ': res.data.VideoId
|
|
|
+ }
|
|
|
+ that.btn.title = '开始上传'
|
|
|
+ that.uploadVideo()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ uploadVideo() {
|
|
|
+ let userData = '{"Vod":{}}'
|
|
|
+ let uploader = this.createUploader()
|
|
|
+ uploader.addFile(this.file, null, null, null, userData)
|
|
|
+ uploader.startUpload()
|
|
|
+ },
|
|
|
+ goCreate() {
|
|
|
+ this.$router.push('/user/',{vid:this.uploadInfo.videoId})
|
|
|
+ },
|
|
|
+ createUploader(type) {
|
|
|
+ let self = this
|
|
|
+ let uploader = new AliyunUpload.Vod({
|
|
|
+ timeout: 60000,
|
|
|
+ partSize: 1048576,
|
|
|
+ parallel: 5,
|
|
|
+ retryCount: 3,
|
|
|
+ retryDuration: 2,
|
|
|
+ region: 'cn-beijing',
|
|
|
+ userId: "1402206442454882",
|
|
|
+ enableUploadProgress: true,
|
|
|
+ // 添加文件成功
|
|
|
+ addFileSuccess: function(uploadInfo) {
|
|
|
+ console.log("addFileSuccess: " + uploadInfo.file.name)
|
|
|
+ },
|
|
|
+ // 开始上传
|
|
|
+ onUploadstarted: function(uploadInfo) {
|
|
|
+ // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
|
|
|
+ // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
|
|
|
+ // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
|
|
|
+ // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
|
|
|
+ // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
|
|
|
+ // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
|
|
|
+ // if (!uploadInfo.videoId) {
|
|
|
+ // let createUrl =
|
|
|
+ // 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/CreateUploadVideo?Title=testvod1&FileName=aa.mp4&BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&VideoId=5bfcc7864fc14b96972842172207c9e6'
|
|
|
+ // axios.get(createUrl).then(({
|
|
|
+ // data
|
|
|
+ // }) => {
|
|
|
+ // let uploadAuth = data.UploadAuth
|
|
|
+ // let uploadAddress = data.UploadAddress
|
|
|
+ // let videoId = data.VideoId
|
|
|
+ uploader.setUploadAuthAndAddress(uploadInfo, self.uploadInfo.uploadAuth, self.uploadInfo.uploadAddress,
|
|
|
+ self.uploadInfo.videoId)
|
|
|
+ // })
|
|
|
+ console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint +
|
|
|
+ ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
|
|
|
+ // } else {
|
|
|
+ // // 如果videoId有值，根据videoId刷新上传凭证
|
|
|
+ // // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
|
|
|
+ // let refreshUrl =
|
|
|
+ // 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' +
|
|
|
+ // uploadInfo.videoId
|
|
|
+ // axios.get(refreshUrl).then(({
|
|
|
+ // data
|
|
|
+ // }) => {
|
|
|
+ // let uploadAuth = data.UploadAuth
|
|
|
+ // let uploadAddress = data.UploadAddress
|
|
|
+ // let videoId = data.VideoId
|
|
|
+ // uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 文件上传成功
|
|
|
+ onUploadSucceed: function(uploadInfo) {
|
|
|
+ console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint +
|
|
|
+ ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
|
|
|
+ self.statusText = '文件上传成功!'
|
|
|
+ self.goCreate()
|
|
|
+ },
|
|
|
+ // 文件上传失败
|
|
|
+ onUploadFailed: function(uploadInfo, code, message) {
|
|
|
+ console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
|
|
|
+ self.statusText = '文件上传失败!'
|
|
|
+ },
|
|
|
+ // 取消文件上传
|
|
|
+ onUploadCanceled: function(uploadInfo, code, message) {
|
|
|
+ console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
|
|
|
+ self.statusText = '文件已暂停上传'
|
|
|
+ },
|
|
|
+ // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
|
|
|
+ onUploadProgress: function(uploadInfo, totalSize, progress) {
|
|
|
+ console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize +
|
|
|
+ ", percent:" + Math.ceil(progress * 100) + "%")
|
|
|
+ let progressPercent = Math.ceil(progress * 100)
|
|
|
+ self.btn.title = '已上传' + Math.ceil(progress * 100) + "%"
|
|
|
+
|
|
|
+ },
|
|
|
+ // 上传凭证超时
|
|
|
+ onUploadTokenExpired: function(uploadInfo) {
|
|
|
+ // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
|
|
|
+ // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
|
|
|
+ // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
|
|
|
+ let refreshUrl =
|
|
|
+ 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' +
|
|
|
+ uploadInfo.videoId
|
|
|
+ axios.get(refreshUrl).then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ let uploadAuth = data.UploadAuth
|
|
|
+ uploader.resumeUploadWithAuth(uploadAuth)
|
|
|
+ console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
|
|
|
+ })
|
|
|
+ self.statusText = '文件超时...'
|
|
|
+ },
|
|
|
+ // 全部文件上传结束
|
|
|
+ onUploadEnd: function(uploadInfo) {
|
|
|
+ console.log("onUploadEnd: uploaded all the files")
|
|
|
+ self.statusText = '文件上传完毕'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return uploader
|
|
|
+ },
|
|
|
+ //关闭遮罩
|
|
|
+ closeVideo() {
|
|
|
+ this.videoShow = false
|
|
|
+ this.$refs.add.value = null;
|
|
|
+ },
|
|
|
+ //点击添加按钮
|
|
|
+ add() {
|
|
|
+ this.$refs.add.click();
|
|
|
+ },
|
|
|
+ //监听用户选择文件
|
|
|
+ afterRead2(res) {
|
|
|
+ var that = this
|
|
|
+ var current = event.target.files[0]
|
|
|
+ this.file = current
|
|
|
+ if (!current) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var fileReader = new FileReader()
|
|
|
+ fileReader.readAsDataURL(current)
|
|
|
+ var that = this
|
|
|
+ fileReader.onload = function(e) {
|
|
|
+ that.src = e.currentTarget.result
|
|
|
+ that.videoShow = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .el-button.is-loading {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 7%;
|
|
|
+ top: 85%;
|
|
|
+ }
|
|
|
+
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ margin: auto;
|
|
|
+ border: 1px solid rgb(200, 200, 200);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang='less' scoped>
|
|
|
+ .wrapper {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .add {
|
|
|
+ font-size: 50px;
|
|
|
+ color: gray;
|
|
|
+ font-weight: 100;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 72px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed rgb(200, 200, 200);
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ margin-top: 40vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* .btn {
|
|
|
+ width: 2.8rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ background: rgba(48, 142, 255, 1);
|
|
|
+ box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(48, 142, 255, 0.3);
|
|
|
+ border-radius: 0.04rem;
|
|
|
+ line-height: 0.8rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ margin-top: 0.64rem;
|
|
|
+ }
|
|
|
+ */
|
|
|
+ .link>span {
|
|
|
+ font-size: 0.24rem;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(48, 142, 255, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .link {
|
|
|
+ font-size: 0.26rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(146, 154, 164, 1);
|
|
|
+ line-height: 0.36rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ width: 82%;
|
|
|
+ font-size: 0.3rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(44, 52, 62, 0.7);
|
|
|
+ line-height: 0.51rem;
|
|
|
+ margin-top: 0.36rem;
|
|
|
+ margin-bottom: 0.07rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 3.28rem;
|
|
|
+ height: 2.7rem;
|
|
|
+ }
|
|
|
+</style>
|
