<template>
<el-drawer
title="上传视频"
size="50%"
:visible.sync="drawer"
:direction="direction">
<div class="content">
<div class="upload-box" v-if="!secondStep">
<!--
on-exceed：超出数量限制时的钩子
file-list：上传的文件列表
-->
<el-upload
class="upload-demo"
drag
:data="uploadData"
:action="actionUrl"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
:limit="1"
accept=".mp4,.mov,.mpeg,.avi"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">
<div>(1) 文件大小： 最大 500 MB。</div>
<div>(2) 比例：9:16, 16:9 和 1:1。</div>
<div>(3) 格式：.mp4, .mov, .mpeg, .avi。</div>
<div>投放位置为TikTok限制：分辨率大于720*1280 px , 码率大于 516 Kbps , 时长 5-60s。</div>
</div>
</el-upload>
</div>
<div class="batch-box" v-if="secondStep">
<el-table
ref="multipleTable"
:data="fileList"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column label="文件名">
<template slot-scope="scope">
<div class="video-mes">
<div class="video-mes-lef">
<img :src="scope.row.video_cover_url" />
</div>
<div class="video-mes-rig">
<div class="name-box">
{{ scope.row.file_name }}
<!-- <i class="el-icon-edit"></i> -->
</div>
<div class="video-mes-cont">
<span>{{ scope.row.duration }}</span> | <span>{{ scope.row.width }}*{{ scope.row.height }}</span> | <span>{{ scope.row.bit_rate }} Mbps</span> | <span>{{ scope.row.size }} MB</span>
</div>
</div>
</div>
</template>
</el-table-column>
<!-- <el-table-column
prop="name"
label="广告位要求校验"
width="180">
<template slot-scope="scope">
<i class="el-icon-circle-check"></i>
<i class="el-icon-circle-close"></i>
准备好上传
</template>
</el-table-column>
<el-table-column
prop="status"
label="状态" width="180">
<template slot-scope="scope">
<i class="el-icon-circle-check"></i>
<i class="el-icon-circle-close"></i>
准备好上传
</template>
</el-table-column>
<el-table-column
prop="remark"
label="需要解决的问题">
</el-table-column> -->
</el-table>
</div>
</div>
<div class="demo-drawer__footer">
<div class="footer-lef">选择了 {{ multipleSelection.length }}/{{ fileList.length }}</div>
<div class="footer-rig">
<el-button @click="cancelForm">取 消</el-button>
<el-button type="primary" @click="dataFormSubmit" >上传</el-button>
</div>
</div>
</el-drawer>
</template>
<script>
//import { filetiktokupload } from "@/api/advertising/index";
import store from "@/store";
export default {
data() {
return {
actionUrl: '/api/file/tiktok/upload',
headers: {
agent_token: store.getters.access_token,
},
fileList: [], // 存储上传的文件列表
uploadData: {
advertiserId: '', // Replace with actual advertiserId
type: 'video' // Replace with actual type if necessary
},
secondStep: false,
multipleSelection: [],
advertiser_id: "",
checkedItem: null,
checkedIndex: null,
checked: false,
drawer: false,
loading:false,
direction: 'rtl',
};
},
methods: {
init(advertiserId){
this.reset()
this.uploadData.advertiserId = advertiserId
this.drawer = true;
},
reset(){
this.secondStep = false
this.fileList = []//视频上传失败的时候 该字段重置才能重新上传
this.multipleSelection = []
},
beforeUpload(file) {
const isVideo = file.type.indexOf('video/') > -1;
const isLt1G = file.size / 1024 / 1024 / 1024 < 0.5; // 限制文件大小为500Mb
if (!isVideo) {
this.$message.error('上传文件只能是视频格式!');
return false;
}
if (!isLt1G) {
this.$message.error('上传视频大小不能超过500Mb!');
return false;
}
return true;
},
handleError(err, file, fileList){
this.init()
},
handleSuccess(response, file, fileList) {
if(response.code == 0){
let info = response.data
this.$message.success('视频上传成功')
this.fileList = []
this.fileList.push({
video_id: info.video_id,
video_cover_url: info.video_cover_url,
preview_url: info.preview_url,
file_name: info.file_name,
width: info.width,
height: info.height,
duration: info.duration,
bit_rate: (info.bit_rate/1024/1024).toFixed(2),
size: (info.size/1024/1024).toFixed(2)
})
this.secondStep = true
}else if(response.code == -1){
this.$message.error('上传视频失败，请重试');
this.init(this.uploadData.advertiserId)
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
dataFormSubmit(){
if(this.multipleSelection.length == 0) {
this.$message.error('请选择上传的文件');
return
}
this.$emit("refreshDataList", this.multipleSelection);
this.drawer = false;
},
cancelForm(){
this.reset()
this.drawer = false;
},
}
};
</script>
<style scoped>
.video-mes-lef{ margin-right: 20px; width: 60px; height: 60px;}
.video-mes-lef img{ width: 100%; height: 100%; object-fit: contain;}
.video-mes{ display: flex; align-items: center;}
.content >>> .el-upload, .content >>> .el-upload-dragger{ width: 100%;}
.content >>> .el-upload-dragger{ height: 267px;}
.content >>> .el-upload-dragger .el-icon-upload{ margin-top: 90px;}
.el-icon-circle-check,.el-icon-circle-close{ margin-right: 6px;}
.el-icon-circle-check{ color: green}
.el-icon-circle-close{ color: red}
.el-icon-edit{ font-size: 14px;}
.footer-lef{ font-size: 14px;}
.content{ padding: 0 20px; height: calc(100% - 50px); overflow-y: scroll;}
>>>.demo-drawer__footer{
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
>>>.el-drawer__header{
border-bottom: 1px solid #EBEEF5;
padding-bottom: 15px;
}
</style>