提交 c95d12df authored 作者: matian's avatar matian

updates

上级 84949323
<script setup lang="ts">
import VideoDetail from './VideoDetail.vue'
import { getCreateAuth, updateAuth } from '@/api/base'
import { ElMessage } from 'element-plus'
const idShowMore = ref(false)
const props = defineProps({
createFlag: {
type: Number
}
})
/**
* upload 上传状态 {code: -1(待上传)0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
* progress 上传进度
**/
interface IUpload {
id?: number
code: number
name?: string
msg?: string
progress?: number
videoId?: string
}
let uploadData = $ref<IUpload>({ code: -1 })
let uploadData1 = $ref<IUpload[]>([])
const emit = defineEmits(['upload', 'canClose'])
const form: any = reactive({
timeout: '',
partSize: '',
parallel: '',
retryCount: '',
retryDuration: '',
region: 'cn-shanghai',
userId: '1303984639806000',
file: null,
authProgress: 0,
uploader: null,
statusText: ''
})
const fileChange = (e: any) => {
if (props.createFlag === 1) {
form.file = e.target.files[0]
if (form.file.name.indexOf('.mp4') === -1) {
ElMessage.warning('请上传mp4格式视频')
return
}
var userData = '{"Vod":{}}'
if (form.uploader) {
form.uploader.stopUpload()
form.authProgress = 0
form.statusText = ''
}
form.uploader = createUploader()
form.uploader.addFile(form.file, null, null, null, userData)
form.uploader.startUpload()
} else {
console.log(e.target.files)
form.file = e.target.files
form.file.forEach((item: any) => {
if (item.name.indexOf('.mp4') === -1) {
ElMessage('请上传mp4格式视频')
} else {
var userData = '{"Vod":{}}'
if (form.uploader) {
form.uploader.stopUpload()
form.authProgress = 0
form.statusText = ''
}
setTimeout(() => {
form.uploader = createUploader()
form.uploader.addFile(item, null, null, null, userData)
form.uploader.startUpload()
}, 1000)
}
})
}
}
let id = ref(0)
const createUploader: any = () => {
const w = window as any
// for
const uploader = new w.AliyunUpload.Vod({
timeout: form.timeout || 60000,
partSize: form.partSize || 1048576,
parallel: form.parallel || 5,
retryCount: form.retryCount || 3,
retryDuration: form.retryDuration || 2,
region: form.region,
userId: form.userId,
// 开始上传
onUploadstarted: function (uploadInfo: any) {
console.log(window.localStorage.fileData)
const fileData = JSON.parse(window.localStorage.fileData || '{}')
console.log(fileData.sourceId)
// 判断有没有上传过
const isFile = !!fileData.sourceId
if (!isFile) {
// 没上传过请求凭证上传
getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
window.localStorage.fileData = JSON.stringify({
uploadAuth: data.data.upload_auth,
uploadAddress: data.data.upload_address,
videoId: data.data.source_id,
fileName: uploadInfo.file.name,
fileSize: uploadInfo.file.size
})
uploader.setUploadAuthAndAddress(
uploadInfo,
data.data.upload_auth,
data.data.upload_address,
data.data.source_id
)
})
} else {
console.log(fileData, uploadInfo)
// 上传过判断一下上次上传的文件和本次上传的文件一不一样,一样的话继续上传
if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) {
uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
} else {
getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then((data: any) => {
uploader.setUploadAuthAndAddress(
uploadInfo,
data.data.upload_auth,
data.data.upload_address,
data.data.source_id
)
})
}
}
if (props.createFlag === 1) {
uploadData = {
code: 1,
name: uploadInfo.file.name,
msg: '开始上传'
}
} else {
uploadData1.push({
code: 1,
name: uploadInfo.file.name,
msg: '开始上传'
})
emit('canClose', { closeStatus: false })
}
},
// 文件上传成功
onUploadSucceed: function (uploadInfo: any) {
const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
if (props.createFlag === 1) {
uploadData = {
code: 0,
name: uploadInfo.file.name,
videoId: fileData.videoId,
msg: '上传成功'
}
} else {
const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
uploadData1[findIndex] = {
code: 0,
name: uploadInfo.file.name,
videoId: fileData.videoId,
msg: '上传成功'
}
}
emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
emit('canClose', { closeStatus: true })
},
// 文件上传失败
// code:any, message:any
onUploadFailed: function (uploadInfo: any) {
if (props.createFlag === 1) {
uploadData = {
code: 2,
name: uploadInfo.file.name,
msg: '文件上传失败'
}
} else {
const findIndex = uploadData1.findIndex(item => item.id === id.value)
uploadData1[findIndex] = {
id: id.value,
code: 2,
name: uploadInfo.file.name,
msg: '文件上传失败'
}
}
},
// 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
let progressPercent = Math.ceil(progress * 100)
form.authProgress = progressPercent
if (props.createFlag === 1) {
uploadData.progress = progressPercent
} else {
const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
uploadData1[findIndex].progress = progressPercent
}
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo: any) {
const fileData = JSON.parse(window.localStorage.fileData || '{}')
updateAuth({ source_id: fileData.videoId }).then(({ data }) => {
let uploadAuth = data.UploadAuth
window.localStorage.fileData = JSON.stringify({
uploadAuth: data.data.upload_auth,
uploadAddress: data.data.upload_address,
videoId: data.data.source_id,
fileName: uploadInfo.file.name,
fileSize: uploadInfo.file.size
})
uploader.resumeUploadWithAuth(uploadAuth)
})
}
})
return uploader
}
const handleView = () => {
idShowMore.value = true
}
</script>
<template>
<div v-if="props.createFlag === 1">
<div class="upload-video">
<div class="upload-btn">
本地文件
<!-- accept=".mp4" -->
<input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" />
</div>
<div class="demo-progress" v-if="uploadData.code === 1">
<el-progress style="width: 340px" :percentage="uploadData.progress" />
</div>
<div class="error video-info" v-if="uploadData.code === 2">
<div class="name">上传失败(请重新选择文件进行上传)</div>
</div>
<div class="video-info" v-if="uploadData.code === 0">
<div class="name">{{ uploadData.name }}</div>
</div>
</div>
<div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div>
</div>
<div v-else>
<div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">
<div class="upload-btn">
本地文件
<input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" multiple />
</div>
<div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div>
<div v-for="(item, index) in uploadData1" :key="index" style="display: flex; flex-direction: column">
<div class="demo-progress" v-if="item.code === 1">
<span style="min-width: 340px">{{ item.name }}</span>
<el-progress style="width: 200px" :percentage="item.progress" />
</div>
<div class="error video-info" v-if="item.code === 2">
<div class="name">上传失败(请重新选择文件进行上传)</div>
</div>
<div class="video-info" v-if="item.code === 0">
<div class="name1">{{ item.name }}</div>
</div>
</div>
<el-link type="primary" v-if="uploadData1.length > 3" @click="handleView"
>{{ uploadData1.length }}个文件,查看更多</el-link
>
</div>
</div>
<VideoDetail :videoList="uploadData1" v-model:idShowMore="idShowMore" v-if="idShowMore === true" />
</template>
<style lang="scss">
.demo-progress {
min-width: 350px;
display: flex;
span {
color: #999999;
font-size: 14px;
transform: translateX(-20px);
}
}
#fileUpload {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.00001;
}
.tips {
font-size: 12px;
line-height: 100%;
color: #999999;
margin-top: 8px;
}
.upload-video {
display: flex;
align-items: center;
.upload-btn {
position: relative;
width: 94px;
line-height: 36px;
background: rgba(250, 223, 230, 0.39);
border: 1px solid #aa1941;
border-radius: 20px;
font-size: 14px;
color: #aa1941;
margin-right: 30px;
text-align: center;
}
.video-info {
display: flex;
.name {
color: #333333;
font-size: 16px;
line-height: 100%;
}
.name1 {
color: #aa1941;
font-size: 14px;
line-height: 1.5;
}
.view {
font-size: 16px;
line-height: 100%;
color: #399ee8;
margin-left: 20px;
cursor: pointer;
}
}
}
</style>
<script setup lang="ts"> <script setup lang="ts">
import VideoDetail from './VideoDetail.vue'
import { getCreateAuth, updateAuth } from '@/api/base' import { getCreateAuth, updateAuth } from '@/api/base'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
const idShowMore = ref(false)
const props = defineProps({
createFlag: {
type: Number
}
})
/** /**
* upload 上传状态 {code: -1(待上传)0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'} * upload 上传状态 {code: -1(待上传)0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
* progress 上传进度 * progress 上传进度
**/ **/
interface IUpload { interface IUpload {
id?: number
code: number code: number
name?: string name?: string
msg?: string msg?: string
...@@ -21,9 +13,8 @@ interface IUpload { ...@@ -21,9 +13,8 @@ interface IUpload {
videoId?: string videoId?: string
} }
let uploadData = $ref<IUpload>({ code: -1 }) let uploadData = $ref<IUpload>({ code: -1 })
let uploadData1 = $ref<IUpload[]>([])
const emit = defineEmits(['upload', 'canClose']) const emit = defineEmits(['upload'])
const form: any = reactive({ const form: any = reactive({
timeout: '', timeout: '',
partSize: '', partSize: '',
...@@ -38,48 +29,24 @@ const form: any = reactive({ ...@@ -38,48 +29,24 @@ const form: any = reactive({
statusText: '' statusText: ''
}) })
const fileChange = (e: any) => { const fileChange = (e: any) => {
if (props.createFlag === 1) { form.file = e.target.files[0]
form.file = e.target.files[0] if (form.file.name.indexOf('.mp4') === -1) {
if (form.file.name.indexOf('.mp4') === -1) { ElMessage('请上传mp4格式视频')
ElMessage.warning('请上传mp4格式视频') return
return }
} var userData = '{"Vod":{}}'
var userData = '{"Vod":{}}' if (form.uploader) {
if (form.uploader) { form.uploader.stopUpload()
form.uploader.stopUpload() form.authProgress = 0
form.authProgress = 0 form.statusText = ''
form.statusText = ''
}
form.uploader = createUploader()
form.uploader.addFile(form.file, null, null, null, userData)
form.uploader.startUpload()
} else {
console.log(e.target.files)
form.file = e.target.files
form.file.forEach((item: any) => {
if (item.name.indexOf('.mp4') === -1) {
ElMessage('请上传mp4格式视频')
} else {
var userData = '{"Vod":{}}'
if (form.uploader) {
form.uploader.stopUpload()
form.authProgress = 0
form.statusText = ''
}
setTimeout(() => {
form.uploader = createUploader()
form.uploader.addFile(item, null, null, null, userData)
console.log(userData)
form.uploader.startUpload()
}, 1000)
}
})
} }
form.uploader = createUploader()
form.uploader.addFile(form.file, null, null, null, userData)
form.uploader.startUpload()
} }
let id = ref(0)
const createUploader: any = () => { const createUploader: any = () => {
const w = window as any const w = window as any
// for
const uploader = new w.AliyunUpload.Vod({ const uploader = new w.AliyunUpload.Vod({
timeout: form.timeout || 60000, timeout: form.timeout || 60000,
partSize: form.partSize || 1048576, partSize: form.partSize || 1048576,
...@@ -90,9 +57,7 @@ const createUploader: any = () => { ...@@ -90,9 +57,7 @@ const createUploader: any = () => {
userId: form.userId, userId: form.userId,
// 开始上传 // 开始上传
onUploadstarted: function (uploadInfo: any) { onUploadstarted: function (uploadInfo: any) {
console.log(window.localStorage.fileData)
const fileData = JSON.parse(window.localStorage.fileData || '{}') const fileData = JSON.parse(window.localStorage.fileData || '{}')
console.log(fileData.sourceId)
// 判断有没有上传过 // 判断有没有上传过
const isFile = !!fileData.sourceId const isFile = !!fileData.sourceId
if (!isFile) { if (!isFile) {
...@@ -113,7 +78,6 @@ const createUploader: any = () => { ...@@ -113,7 +78,6 @@ const createUploader: any = () => {
) )
}) })
} else { } else {
console.log(fileData, uploadInfo)
// 上传过判断一下上次上传的文件和本次上传的文件一不一样,一样的话继续上传 // 上传过判断一下上次上传的文件和本次上传的文件一不一样,一样的话继续上传
if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) { if (fileData.fileName === uploadInfo.file.name && fileData.fileSize === uploadInfo.file.size) {
uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId) uploader.setUploadAuthAndAddress(uploadInfo, fileData.uploadAuth, fileData.uploadAddress, fileData.videoId)
...@@ -128,72 +92,37 @@ const createUploader: any = () => { ...@@ -128,72 +92,37 @@ const createUploader: any = () => {
}) })
} }
} }
if (props.createFlag === 1) { uploadData = {
uploadData = { code: 1,
code: 1, name: uploadInfo.file.name,
name: uploadInfo.file.name, msg: '开始上传'
msg: '开始上传'
}
} else {
uploadData1.push({
code: 1,
name: uploadInfo.file.name,
msg: '开始上传'
})
emit('canClose', { closeStatus: false })
} }
}, },
// 文件上传成功 // 文件上传成功
onUploadSucceed: function (uploadInfo: any) { onUploadSucceed: function (uploadInfo: any) {
const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {} const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
if (props.createFlag === 1) { uploadData = {
uploadData = { code: 0,
code: 0, name: uploadInfo.file.name,
name: uploadInfo.file.name, videoId: fileData.videoId,
videoId: fileData.videoId, msg: '上传成功'
msg: '上传成功'
}
} else {
const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
uploadData1[findIndex] = {
code: 0,
name: uploadInfo.file.name,
videoId: fileData.videoId,
msg: '上传成功'
}
} }
emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name }) emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
emit('canClose', { closeStatus: true })
}, },
// 文件上传失败 // 文件上传失败
// code:any, message:any // code:any, message:any
onUploadFailed: function (uploadInfo: any) { onUploadFailed: function (uploadInfo: any) {
if (props.createFlag === 1) { uploadData = {
uploadData = { code: 2,
code: 2, name: uploadInfo.file.name,
name: uploadInfo.file.name, msg: '文件上传失败'
msg: '文件上传失败'
}
} else {
const findIndex = uploadData1.findIndex(item => item.id === id.value)
uploadData1[findIndex] = {
id: id.value,
code: 2,
name: uploadInfo.file.name,
msg: '文件上传失败'
}
} }
}, },
// 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上 // 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) { onUploadProgress: function (uploadInfo: any, totalSize: any, progress: any) {
let progressPercent = Math.ceil(progress * 100) let progressPercent = Math.ceil(progress * 100)
form.authProgress = progressPercent form.authProgress = progressPercent
if (props.createFlag === 1) { uploadData.progress = progressPercent
uploadData.progress = progressPercent
} else {
const findIndex = uploadData1.findIndex(item => item.name === uploadInfo.file.name)
uploadData1[findIndex].progress = progressPercent
}
}, },
// 上传凭证超时 // 上传凭证超时
onUploadTokenExpired: function (uploadInfo: any) { onUploadTokenExpired: function (uploadInfo: any) {
...@@ -213,12 +142,9 @@ const createUploader: any = () => { ...@@ -213,12 +142,9 @@ const createUploader: any = () => {
}) })
return uploader return uploader
} }
const handleView = () => {
idShowMore.value = true
}
</script> </script>
<template> <template>
<div v-if="props.createFlag === 1"> <div>
<div class="upload-video"> <div class="upload-video">
<div class="upload-btn"> <div class="upload-btn">
本地文件 本地文件
...@@ -227,6 +153,7 @@ const handleView = () => { ...@@ -227,6 +153,7 @@ const handleView = () => {
</div> </div>
<div class="demo-progress" v-if="uploadData.code === 1"> <div class="demo-progress" v-if="uploadData.code === 1">
<el-progress style="width: 340px" :percentage="uploadData.progress" /> <el-progress style="width: 340px" :percentage="uploadData.progress" />
<!-- <span> {{ uploadData.progress }}% </span> -->
</div> </div>
<div class="error video-info" v-if="uploadData.code === 2"> <div class="error video-info" v-if="uploadData.code === 2">
<div class="name">上传失败(请重新选择文件进行上传)</div> <div class="name">上传失败(请重新选择文件进行上传)</div>
...@@ -237,36 +164,10 @@ const handleView = () => { ...@@ -237,36 +164,10 @@ const handleView = () => {
</div> </div>
<div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div> <div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div>
</div> </div>
<div v-else>
<div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">
<div class="upload-btn">
本地文件
<input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" multiple />
</div>
<div class="tips">推荐视频格式:帧率为25fps\输出码率为4M\输出格式为mp4,建议采用格式工厂等工具处理后上传。</div>
<div v-for="(item, index) in uploadData1.slice(0, 3)" :key="index" style="display: flex; flex-direction: column">
<div class="demo-progress" v-if="item.code === 1">
<span style="min-width: 340px">{{ item.name }}</span>
<el-progress style="width: 200px" :percentage="item.progress" />
</div>
<div class="error video-info" v-if="item.code === 2">
<div class="name">上传失败(请重新选择文件进行上传)</div>
</div>
<div class="video-info" v-if="item.code === 0">
<div class="name1">{{ item.name }}</div>
</div>
</div>
<el-link type="primary" v-if="uploadData1.length > 3" @click="handleView"
>{{ uploadData1.length }}个文件,查看更多</el-link
>
</div>
</div>
<VideoDetail :videoList="uploadData1" v-model:idShowMore="idShowMore" v-if="idShowMore === true" />
</template> </template>
<style lang="scss"> <style lang="scss">
.demo-progress { .demo-progress {
min-width: 350px; width: 350px;
display: flex; display: flex;
span { span {
color: #999999; color: #999999;
...@@ -310,11 +211,6 @@ const handleView = () => { ...@@ -310,11 +211,6 @@ const handleView = () => {
font-size: 16px; font-size: 16px;
line-height: 100%; line-height: 100%;
} }
.name1 {
color: #aa1941;
font-size: 14px;
line-height: 1.5;
}
.view { .view {
font-size: 16px; font-size: 16px;
line-height: 100%; line-height: 100%;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论