Skip to content

C
center-resource
提交 c95d12df authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 84949323
隐藏空白字符变更
内嵌 并排
正在显示 包含 358 行增加 和 136 行删除
src/modules/resource/video/components/UploadMultipleVideo.vue 0 → 100644
浏览文件 @ c95d12df
<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>
src/modules/resource/video/components/UploadVideo.vue
浏览文件 @ c95d12df
<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
......@@ -21,9 +13,8 @@ interface IUpload {
videoId?: string
}
let uploadData = $ref<IUpload>({ code: -1 })
let uploadData1 = $ref<IUpload[]>([])
const emit = defineEmits(['upload', 'canClose'])
const emit = defineEmits(['upload'])
const form: any = reactive({
timeout: '',
partSize: '',
......@@ -38,48 +29,24 @@ const form: any = reactive({
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)
console.log(userData)
form.uploader.startUpload()
}, 1000)
}
})
form.file = e.target.files[0]
if (form.file.name.indexOf('.mp4') === -1) {
ElMessage('请上传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()
}
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,
......@@ -90,9 +57,7 @@ const createUploader: any = () => {
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) {
......@@ -113,7 +78,6 @@ const createUploader: any = () => {
)
})
} 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)
......@@ -128,72 +92,37 @@ const createUploader: any = () => {
})
}
}
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 })
uploadData = {
code: 1,
name: uploadInfo.file.name,
msg: '开始上传'
}
},
// 文件上传成功
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: '上传成功'
}
uploadData = {
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: '文件上传失败'
}
uploadData = {
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
}
uploadData.progress = progressPercent
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo: any) {
......@@ -213,12 +142,9 @@ const createUploader: any = () => {
})
return uploader
}
const handleView = () => {
idShowMore.value = true
}
</script>
<template>
<div v-if="props.createFlag === 1">
<div>
<div class="upload-video">
<div class="upload-btn">
本地文件
......@@ -227,6 +153,7 @@ const handleView = () => {
</div>
<div class="demo-progress" v-if="uploadData.code === 1">
<el-progress style="width: 340px" :percentage="uploadData.progress" />
<!-- <span> {{ uploadData.progress }}% </span> -->
</div>
<div class="error video-info" v-if="uploadData.code === 2">
<div class="name">上传失败（请重新选择文件进行上传）</div>
......@@ -237,36 +164,10 @@ const handleView = () => {
</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.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>
<style lang="scss">
.demo-progress {
min-width: 350px;
width: 350px;
display: flex;
span {
color: #999999;
......@@ -310,11 +211,6 @@ const handleView = () => {
font-size: 16px;
line-height: 100%;
}
.name1 {
color: #aa1941;
font-size: 14px;
line-height: 1.5;
}
.view {
font-size: 16px;
line-height: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论