Skip to content

C
center-resource
提交 61dd28af authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

Merge branch 'ip' into gdrtvu

上级 c4bddec0 cd464500
显示空白字符变更
内嵌 并排
正在显示 包含 263 行增加 和 375 行删除
.env
浏览文件 @ 61dd28af
VITE_LOGIN_URL=https://login.segedu.cn/auth/login/index VITE_LOGIN_URL=http://172.16.3.203:1001/auth/login/index
VITE_QA_CENTER_URL=https://qa-center.segedu.cn VITE_QA_CENTER_URL=http://172.16.3.203:1004
VITE_BI_URL=https://bi.segedu.cn VITE_BI_URL=http://172.16.3.203:1012
VITE_STATIC_URL=https://saas-lab-api
.env.dev
浏览文件 @ 61dd28af
VITE_LOGIN_URL=https://login.ezijing.com/auth/login/index VITE_LOGIN_URL=https://login.zijing.chat/auth/login/index
.env.test
浏览文件 @ 61dd28af
VITE_LOGIN_URL=https://login2.ezijing.com/auth/login/index VITE_LOGIN_URL=https://login2.zijing.chat/auth/login/index
index.html
浏览文件 @ 61dd28af
...@@ -6,9 +6,9 @@ ...@@ -6,9 +6,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>统一资源管理平台</title> <title>统一资源管理平台</title>
<script src="https://webapp-pub.ezijing.com/plugins/tinymce@6/tinymce.min.js"></script> <script src="https://webapp-pub.ezijing.com/plugins/tinymce@6/tinymce.min.js"></script>
<script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script> <!-- <script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
<script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script> <script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
<script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.3.min.js"></script> <script src="https://webapp-pub.ezijing.com/center_resource/lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.3.min.js"></script> -->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
浏览文件 @ 61dd28af
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --mode dev", "dev": "vite --mode dev",
"build": "vue-tsc --noEmit && vite build --mode prod && npm run deploy", "build": "vue-tsc --noEmit && vite build --mode prod",
"build:test": "vue-tsc --noEmit && vite build --mode test", "build:test": "vue-tsc --noEmit && vite build --mode test",
"build:pre": "vue-tsc --noEmit && vite build --mode pre", "build:pre": "vue-tsc --noEmit && vite build --mode pre",
"preview": "vite preview --port 4173", "preview": "vite preview --port 4173",
......
src/api/base.ts
浏览文件 @ 61dd28af
...@@ -62,3 +62,32 @@ export function getProjectList(params: { organization_id?: string; project_id?: ...@@ -62,3 +62,32 @@ export function getProjectList(params: { organization_id?: string; project_id?:
export function getQuestionCategory(params: { project_tag: string }) { export function getQuestionCategory(params: { project_tag: string }) {
return httpRequest.get(`/api/qbs/admin/v2/question-category/tree/${params.project_tag}`, { params }) return httpRequest.get(`/api/qbs/admin/v2/question-category/tree/${params.project_tag}`, { params })
} }
// 获取分片大小和唯一文件名
export function getLocalFileChunk(params: { file_size: number; file_name: string }) {
return httpRequest.get('/api/lab/v1/common/file/chunk', { params })
}
// 上传每个分片前请求接口来获取当前文件是否超时,之前的分片是否被清理,如果被请求则拒绝处理。返回客户端错误码，让客户端户端不再续传剩余分片
// 1文件被清理 0文件未被清理
export function checkLocalFile(params: { file_name: string }) {
return httpRequest.get('/api/lab/v1/common/file/check', { params })
}
// 上传文件
export function uploadLocalFile(
data: { file: File | Blob; file_name: string; is_continuingly?: number; now_package_num: number; total_package_num: number },
options = {}
) {
return httpRequest.post(
'/api/lab/v1/common/file/upload',
data,
Object.assign(
{
withCredentials: false,
headers: { 'Content-Type': 'multipart/form-data' }
},
options
)
)
}
src/components/base/AppUpload.vue
浏览文件 @ 61dd28af
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue' import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus' import type { UploadProps, UploadUserFile } from 'element-plus'
import md5 from 'blueimp-md5' // import md5 from 'blueimp-md5'
import { getSignature } from '@/api/base' import { getLocalFileChunk } from '@/api/base'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
...@@ -37,19 +37,12 @@ const showFileList = computed(() => { ...@@ -37,19 +37,12 @@ const showFileList = computed(() => {
// 上传之前 // 上传之前
const handleBeforeUpload = async (file: any) => { const handleBeforeUpload = async (file: any) => {
const fileName = file.name const response: Record<string, any> = await getLocalFileChunk({ file_name: file.name, file_size: file.size })
const key = props.prefix + md5(fileName + new Date().getTime()) + '/' + fileName
const response: Record<string, any> = await getSignature()
uploadData.value = { uploadData.value = {
key, file_name: response.data.detail.file_name,
host: response.host, now_package_num: 1,
OSSAccessKeyId: response.accessid, total_package_num: 1
policy: response.policy,
signature: response.signature,
success_action_status: '200',
url: `${response.host}/${key}`
} }
file.url = `${response.host}/${key}`
if (props.beforeUploadFiles) { if (props.beforeUploadFiles) {
return props.beforeUploadFiles(file) return props.beforeUploadFiles(file)
} }
...@@ -57,6 +50,7 @@ const handleBeforeUpload = async (file: any) => { ...@@ -57,6 +50,7 @@ const handleBeforeUpload = async (file: any) => {
// 上传成功 // 上传成功
const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => { const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any) => {
file.url = response.data.detail.uri
if (!files.every((item: any) => item.status === 'success')) return if (!files.every((item: any) => item.status === 'success')) return
if (showFileList.value) { if (showFileList.value) {
emit( emit(
...@@ -71,7 +65,7 @@ const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any ...@@ -71,7 +65,7 @@ const handleSuccess: UploadProps['onSuccess'] = (response, file: any, files: any
}) })
) )
} else { } else {
emit('update:modelValue', file.raw.url) emit('update:modelValue', response.data.detail.uri)
} }
} }
...@@ -102,7 +96,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => { ...@@ -102,7 +96,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
<template> <template>
<el-upload <el-upload
:action="uploadData?.host" action="/api/lab/v1/common/file/upload"
:data="uploadData" :data="uploadData"
:show-file-list="showFileList" :show-file-list="showFileList"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
......
src/components/tinymce/Index.vue
浏览文件 @ 61dd28af
<script setup lang="ts"> <script setup lang="ts">
import Editor from '@tinymce/tinymce-vue' import Editor from '@tinymce/tinymce-vue'
import md5 from 'blueimp-md5' import { getLocalFileChunk, uploadLocalFile } from '@/api/base'
import { getSignature, uploadFile } from '@/api/base'
const props = defineProps({ const props = defineProps({
height: { height: {
type: Number, type: Number,
default: 600 default: 400
} }
}) })
const ImageUploadHandler = (blobInfo: any) => const ImageUploadHandler = (blobInfo: any) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const file = blobInfo.blob() const file = blobInfo.blob()
getSignature() getLocalFileChunk({ file_name: file.name, file_size: file.size })
.then((response: any) => { .then((response: any) => {
const prefix = 'upload/admin/'
const key = prefix + md5(file.name + new Date().getTime()) + file.name.substr(file.name.lastIndexOf('.'))
const { accessid, policy, signature, host } = response
const params = { const params = {
key,
host,
OSSAccessKeyId: accessid,
policy,
signature,
success_action_status: '200',
file, file,
url: `${host}/${key}` file_name: response.data.detail.file_name,
now_package_num: 1,
total_package_num: 1
} }
uploadFile(params) uploadLocalFile(params)
.then((res: any) => { .then((res: any) => {
resolve(res.url) resolve(res.data.detail.uri)
}) })
.catch(() => { .catch(() => {
reject('上传失败') reject('上传失败')
}) })
}) })
.catch(() => { .catch(() => {
reject('获取Signature失败') reject('上传失败')
}) })
}) })
......
src/composables/useUpload.ts 0 → 100644
浏览文件 @ 61dd28af
import { getLocalFileChunk, uploadLocalFile } from '@/api/base'
interface FileItem {
file: File
url: string
name: string
progress: number
abortController: AbortController
}
interface UploadOptions {
multiple?: boolean
autoUpload?: boolean
onUploadStarted?: (file: FileItem) => void
onUploadSucceed?: (file: FileItem) => void
onUploadFailed?: (file: FileItem, error: any) => void
onUploadProgress?: (file: FileItem, progress: number) => void
onUploadEnd?: () => void
}
export function useUpload(options: UploadOptions = {}) {
options = Object.assign({ autoUpload: true, multiple: false }, options)
const files = ref<FileItem[]>([])
const uploading = ref(false)
function addFile(file: File) {
// 检查文件是否已经在队列中
const existingFileIndex = files.value.findIndex(f => f.name === file.name)
// 如果文件已经在队列中，并且上传已经开始，则直接返回
if (existingFileIndex !== -1 && files.value[existingFileIndex].progress > 0) return
if (!options.multiple) stopUpload()
const abortController = new AbortController()
files.value.push({ url: '', name: file.name, file, progress: 0, abortController })
if (options.autoUpload && !uploading.value) startUpload()
}
async function startUpload() {
uploading.value = true
for (const file of files.value) {
if (file.progress === 0) {
// 只处理尚未开始上传的文件
try {
options?.onUploadStarted?.(file)
await uploadFile(file)
options?.onUploadSucceed?.(file)
} catch (error) {
options?.onUploadFailed?.(file, error)
}
}
}
uploading.value = false
options?.onUploadEnd?.()
}
async function uploadFile(file: FileItem) {
const {
data: { detail }
} = await getLocalFileChunk({ file_name: file.file.name, file_size: file.file.size })
const fileName = detail.file_name
const chunkSize = detail.chunk_size
const totalChunks = Math.ceil(file.file.size / chunkSize)
for (let chunkIndex = 0; chunkIndex < totalChunks; chunkIndex++) {
const chunk = file.file.slice(chunkIndex * chunkSize, (chunkIndex + 1) * chunkSize)
await uploadChunk({ file, chunk, chunkIndex, fileName, totalChunks })
}
}
async function uploadChunk({
file,
chunk,
chunkIndex,
fileName,
totalChunks
}: {
file: FileItem
chunk: Blob
chunkIndex: number
fileName: string
totalChunks: number
}) {
const {
data: { detail }
} = await uploadLocalFile(
{ file_name: fileName, file: chunk, now_package_num: chunkIndex + 1, total_package_num: totalChunks },
{
signal: file.abortController.signal,
onUploadProgress(event: ProgressEvent) {
updateProgress({ file, event, chunkIndex, totalChunks })
}
}
)
file.url = detail.uri
}
function updateProgress({ event, chunkIndex, totalChunks, file }: { file: FileItem; event: ProgressEvent; chunkIndex: number; totalChunks: number }) {
const totalSize = event.total * totalChunks
const loadedSize = event.loaded + chunkIndex * event.total
const progressPercent = (loadedSize / totalSize) * 100
file.progress = parseFloat(progressPercent.toFixed(2))
options?.onUploadProgress?.(file, file.progress)
}
function cancelUpload(file: FileItem) {
file.abortController.abort()
files.value = files.value.filter(item => item.name !== file.name)
}
function stopUpload() {
files.value.forEach(cancelUpload) // 停止所有文件的上传
files.value.length = 0
uploading.value = false // 更新上传状态
}
return { files, uploading, addFile, startUpload, cancelUpload, stopUpload }
}
src/modules/resource/video/components/BatchImportVideo.vue
浏览文件 @ 61dd28af
...@@ -23,14 +23,14 @@ const handleConfirm = () => { ...@@ -23,14 +23,14 @@ const handleConfirm = () => {
emit('update') emit('update')
} }
const handleCancel = () => { const handleCancel = () => {
const fileList = uploadMultipleVideoRef?.uploader?._uploadList || [] // const fileList = uploadMultipleVideoRef?.uploader?._uploadList || []
if (fileList.length) { // if (fileList.length) {
for (const item of fileList) { // for (const item of fileList) {
if (item.state === 'Uploading') { // if (item.state === 'Uploading') {
return ElMessage.error('请先完成上传') // return ElMessage.error('请先完成上传')
} // }
} // }
} // }
emit('update:modelValue', false) emit('update:modelValue', false)
} }
// 上传视频成功 // 上传视频成功
......
src/modules/resource/video/components/UploadImg.vue
浏览文件 @ 61dd28af
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
// import { Plus } from '@element-plus/icons-vue' // import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus' import type { UploadProps, UploadUserFile } from 'element-plus'
import md5 from 'blueimp-md5' // import md5 from 'blueimp-md5'
import { getSignature } from '@/api/base' import { getLocalFileChunk } from '@/api/base'
const props = withDefaults(defineProps<{ modelValue: string | []; prefix?: string }>(), { const props = withDefaults(defineProps<{ modelValue: string | []; prefix?: string }>(), {
prefix: 'upload/admin/' prefix: 'upload/admin/'
...@@ -27,23 +27,17 @@ const showFileList = computed(() => { ...@@ -27,23 +27,17 @@ const showFileList = computed(() => {
// 上传之前 // 上传之前
const handleBeforeUpload = async (file: any) => { const handleBeforeUpload = async (file: any) => {
const fileName = file.name const response: Record<string, any> = await getLocalFileChunk({ file_name: file.name, file_size: file.size })
const key = props.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
const response: Record<string, any> = await getSignature()
uploadData.value = { uploadData.value = {
key, file_name: response.data.detail.file_name,
host: response.host, now_package_num: 1,
OSSAccessKeyId: response.accessid, total_package_num: 1
policy: response.policy,
signature: response.signature,
success_action_status: '200',
url: `${response.host}/${key}`
} }
file.url = `${response.host}/${key}`
} }
// 上传成功 // 上传成功
const handleSuccess = (response: any, file: any, files: any) => { const handleSuccess = (response: any, file: any, files: any) => {
file.url = response.data.detail.uri
if (!files.every((item: any) => item.status === 'success')) return if (!files.every((item: any) => item.status === 'success')) return
if (showFileList.value) { if (showFileList.value) {
emit( emit(
...@@ -53,7 +47,7 @@ const handleSuccess = (response: any, file: any, files: any) => { ...@@ -53,7 +47,7 @@ const handleSuccess = (response: any, file: any, files: any) => {
}) })
) )
} else { } else {
emit('update:modelValue', file.raw.url) emit('update:modelValue', response.data.detail.uri)
} }
} }
...@@ -80,7 +74,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => { ...@@ -80,7 +74,7 @@ const handlePreview: UploadProps['onPreview'] = uploadFile => {
<template> <template>
<el-upload <el-upload
:action="uploadData?.host" action="/api/lab/v1/common/file/upload"
:data="uploadData" :data="uploadData"
:show-file-list="false" :show-file-list="false"
:before-upload="handleBeforeUpload" :before-upload="handleBeforeUpload"
......
src/modules/resource/video/components/UploadMultipleVideo.vue
浏览文件 @ 61dd28af
<script setup lang="ts"> <script setup lang="ts">
import VideoDetail from './VideoDetail.vue' import VideoDetail from './VideoDetail.vue'
import { getCreateAuth, updateAuth } from '@/api/base'
import { CircleClose } from '@element-plus/icons-vue' import { CircleClose } from '@element-plus/icons-vue'
const idShowMore = ref(false) import { useUpload } from '@/composables/useUpload'
// uploadInfo 包含要上传的文件信息 const idShowMore = ref(false)
interface UploadInfo {
bucket: string
checkpoint: { file: File; name: string; fileSize: number; partSize: number; uploadId: string }
endpoint: string
file: File
fileHash: string
isImage: boolean
loaded: number
object: string
region: string
retry: boolean
ri: string
state: string
userData: string
videoId: string
videoInfo: any
progress: number
}
const emit = defineEmits(['upload', 'canClose']) const emit = defineEmits(['upload', 'canClose'])
let uploader = createUploader() const { files, addFile, cancelUpload } = useUpload({
let fileList = $ref<UploadInfo[]>([]) multiple: true,
onUploadSucceed(file) {
emit('upload', file)
}
})
const fileChange = (event: Event) => { const fileChange = (event: Event) => {
const element = event.currentTarget as HTMLInputElement const element = event.currentTarget as HTMLInputElement
let files: FileList | null = element.files let files: FileList | null = element.files
if (!files) return if (!files) return
for (const file of files) { for (const file of files) {
// 是否重复上传 addFile(file)
const hasRepeat = !!fileList.find(
item =>
item.file.name === file.name && item.file.size === file.size && item.file.lastModified === file.lastModified
)
!hasRepeat && uploader.addFile(file, null, null, null, '{"Vod":{}}')
} }
uploader.startUpload()
fileList = uploader._uploadList
}
function updateFileList(uploadInfo: UploadInfo) {
if (!uploadInfo) return
fileList = fileList.map(item => {
if (item.ri === uploadInfo.ri) {
return { ...item, ...uploadInfo }
}
return item
})
}
function createUploader() {
return new window['AliyunUpload'].Vod({
//userID，必填，您可以使用阿里云账号访问账号中心（https://account.console.aliyun.com/），即可查看账号ID
userId: '1303984639806000',
//上传到视频点播的地域，默认值为'cn-shanghai'，
//eu-central-1，ap-southeast-1
region: 'cn-shanghai',
//分片大小默认1 MB，不能小于100 KB（100*1024）
partSize: 1048576,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
//开始上传
onUploadstarted: onUploadStarted,
//文件上传成功
onUploadSucceed: onUploadSucceed,
//文件上传失败
onUploadFailed: onUploadFailed,
//文件上传进度，单位：字节
onUploadProgress: onUploadProgress,
//上传凭证或STS token超时
onUploadTokenExpired: onUploadTokenExpired,
//全部文件上传结束
onUploadEnd: onUploadEnd
})
}
// 开始上传
function onUploadStarted(uploadInfo: UploadInfo) {
console.log('onUploadStarted', uploadInfo)
getCreateAuth({ title: uploadInfo.file.name, file_name: uploadInfo.file.name }).then(res => {
uploader.setUploadAuthAndAddress(uploadInfo, res.data.upload_auth, res.data.upload_address, res.data.source_id)
})
updateFileList(uploadInfo)
emit('canClose', { closeStatus: false })
}
// 文件上传成功
function onUploadSucceed(uploadInfo: UploadInfo) {
console.log('onUploadSucceed', uploadInfo)
updateFileList(uploadInfo)
emit('upload', uploadInfo)
}
//文件上传失败
function onUploadFailed(uploadInfo: UploadInfo, code: number, message: string) {
console.log(uploadInfo, '111111')
console.log('onUploadFailed', uploadInfo, code, message)
updateFileList(uploadInfo)
}
//文件上传进度，单位：字节
function onUploadProgress(uploadInfo: UploadInfo, totalSize: number, loadedPercent: number) {
console.log('onUploadProgress', uploadInfo.file.name, uploadInfo, totalSize, loadedPercent)
updateFileList(uploadInfo)
}
//上传凭证或STS token超时
function onUploadTokenExpired(uploadInfo: UploadInfo) {
console.log('onUploadTokenExpired', uploadInfo)
updateAuth({ source_id: uploadInfo.videoId }).then(res => {
uploader.resumeUploadWithAuth(res.data.UploadAuth)
})
updateFileList(uploadInfo)
}
// 全部文件上传结束
function onUploadEnd(uploadInfo: UploadInfo) {
console.log('onUploadEnd', uploadInfo)
updateFileList(uploadInfo)
emit('canClose', { closeStatus: true })
} }
const handleView = () => { const handleView = () => {
idShowMore.value = true idShowMore.value = true
} }
// 进度条
function percentage(value: number) {
return parseFloat((value ? value * 100 : 0).toFixed(2))
}
// 删除上传文件 // 删除上传文件
const deleteFile = function (index: number) { const deleteFile = function (index: number, item: any) {
console.log(index, 'deleteFile', fileList) console.log(index, 'deleteFile', files)
fileList.splice(index, 1) cancelUpload(item)
uploader.deleteFile(index)
} }
defineExpose({ uploader, fileList: $$(fileList) }) defineExpose({ files })
</script> </script>
<template> <template>
<div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start"> <div class="upload-video" style="display: flex; flex-direction: column; align-items: flex-start">
...@@ -146,19 +40,19 @@ defineExpose({ uploader, fileList: $$(fileList) }) ...@@ -146,19 +40,19 @@ defineExpose({ uploader, fileList: $$(fileList) })
<input accept=".mp4" type="file" id="fileUpload" multiple @change="fileChange" /> <input accept=".mp4" type="file" id="fileUpload" multiple @change="fileChange" />
</div> </div>
<div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div> <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
<div v-for="(item, index) in fileList.slice(0, 3)" :key="index"> <div v-for="(item, index) in files.slice(0, 3)" :key="index">
<div class="video-info"> <div class="video-info">
<span class="name">{{ item.file?.name }}</span> <span class="name">{{ item.name }}</span>
<el-progress style="width: 200px" :percentage="percentage(item.loaded)" class="view" /> <el-progress style="width: 200px" :percentage="item.progress" class="view" />
<div v-if="percentage(item.loaded) == 100">上传成功</div> <div v-if="item.progress == 100">上传成功</div>
<el-icon v-else @click="deleteFile(index)"><CircleClose /></el-icon> <el-icon v-else @click="deleteFile(index, item)"><CircleClose /></el-icon>
</div> </div>
</div> </div>
<el-link style="padding-top: 3px" :underline="false" type="primary" v-if="fileList.length > 3" @click="handleView" <el-link style="padding-top: 3px" :underline="false" type="primary" v-if="files.length > 3" @click="handleView"
>共{{ fileList.length }}个文件，查看更多</el-link >共{{ files.length }}个文件，查看更多</el-link
> >
</div> </div>
<VideoDetail :videoList="fileList" v-model:modelValue="idShowMore" v-if="idShowMore === true" /> <VideoDetail :videoList="files" v-model:modelValue="idShowMore" v-if="idShowMore === true" />
</template> </template>
<style lang="scss"> <style lang="scss">
.demo-progress { .demo-progress {
......
src/modules/resource/video/components/UploadVideo.vue
浏览文件 @ 61dd28af
<script setup lang="ts"> <script setup lang="ts">
import { getCreateAuth, updateAuth } from '@/api/base'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
/** import { useUpload } from '@/composables/useUpload'
* upload 上传状态 {code: -1（待上传）0(成功) 1(开始上传) 2(上传失败), msg: '上传信息'}
* progress 上传进度
**/
interface IUpload {
code: number
name?: string
msg?: string
progress?: number
videoId?: string
}
let uploadData = $ref<IUpload>({ code: -1 })
const emit = defineEmits(['upload']) const emit = defineEmits(['upload'])
const form: any = reactive({
timeout: '', const { files, uploading, addFile } = useUpload({
partSize: '', onUploadSucceed(file) {
parallel: '', emit('upload', file)
retryCount: '', }
retryDuration: '', })
region: 'cn-shanghai', const file = computed(() => {
userId: '1303984639806000', return files.value[0]
file: null,
authProgress: 0,
uploader: null,
statusText: ''
}) })
const fileChange = (e: any) => {
form.file = e.target.files[0] const fileChange = async (event: Event) => {
if (form.file.name.indexOf('.mp4') === -1) { const element = event.currentTarget as HTMLInputElement
const files = element.files
if (!files) return
const [file] = files
if (file.name.indexOf('.mp4') === -1) {
ElMessage('请上传mp4格式视频') ElMessage('请上传mp4格式视频')
return return
} }
var userData = '{"Vod":{}}' addFile(file)
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()
}
const createUploader: any = () => {
const w = window as any
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) {
const fileData = JSON.parse(window.localStorage.fileData || '{}')
// 判断有没有上传过
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 {
// 上传过判断一下上次上传的文件和本次上传的文件一不一样，一样的话继续上传
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
)
})
}
}
uploadData = {
code: 1,
name: uploadInfo.file.name,
msg: '开始上传'
}
},
// 文件上传成功
onUploadSucceed: function (uploadInfo: any) {
const fileData = window.localStorage.fileData ? JSON.parse(window.localStorage.fileData) : {}
uploadData = {
code: 0,
name: uploadInfo.file.name,
videoId: fileData.videoId,
msg: '上传成功'
}
emit('upload', { videoId: fileData.videoId, name: uploadInfo.file.name })
},
// 文件上传失败
// code:any, message:any
onUploadFailed: function (uploadInfo: any) {
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
uploadData.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
} }
</script> </script>
<template> <template>
...@@ -148,18 +30,16 @@ const createUploader: any = () => { ...@@ -148,18 +30,16 @@ const createUploader: any = () => {
<div class="upload-video"> <div class="upload-video">
<div class="upload-btn"> <div class="upload-btn">
本地文件 本地文件
<!-- accept=".mp4" --> <input accept=".mp4" type="file" id="fileUpload" @change="fileChange" />
<input accept=".mp4" type="file" id="fileUpload" @change="fileChange($event)" />
</div> </div>
<div class="demo-progress" v-if="uploadData.code === 1"> <div class="demo-progress" v-if="uploading">
<el-progress style="width: 340px" :percentage="uploadData.progress" /> <el-progress style="width: 340px" :percentage="file.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>
</div> </div> -->
<div class="video-info" v-if="uploadData.code === 0"> <div class="video-info" v-else>
<div class="name">{{ uploadData.name }}</div> <div class="name">{{ file?.name }}</div>
</div> </div>
</div> </div>
<div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div> <div class="tips">推荐视频格式：帧率为25fps\输出码率为4M\输出格式为mp4，建议采用格式工厂等工具处理后上传。</div>
......
src/modules/resource/video/components/VideoDetail.vue
浏览文件 @ 61dd28af
<script lang="ts" setup> <script lang="ts" setup>
interface UploadInfo { interface UploadInfo {
bucket: string
checkpoint: { file: File; name: string; fileSize: number; partSize: number; uploadId: string }
endpoint: string
file: File file: File
fileHash: string
isImage: boolean
loaded: number
object: string
region: string
retry: boolean
ri: string
state: string
userData: string
videoId: string
videoInfo: any
progress: number progress: number
} }
interface Props { interface Props {
...@@ -40,19 +26,13 @@ const handleSizeChange = (val: any) => { ...@@ -40,19 +26,13 @@ const handleSizeChange = (val: any) => {
const handleCurrentChange = (val: any) => { const handleCurrentChange = (val: any) => {
page.currentPage = val page.currentPage = val
} }
function percentage(value: number) {
return parseFloat((value ? value * 100 : 0).toFixed(2))
}
</script> </script>
<template> <template>
<el-dialog :model-value="props.modelValue" title="更多视频文件" :before-close="handleCancel" width="30vw"> <el-dialog :model-value="props.modelValue" title="更多视频文件" :before-close="handleCancel" width="30vw">
<div <div v-for="(item, index) in props.videoList.slice((page.currentPage - 1) * page.size, page.currentPage * page.size)" :key="index">
v-for="(item, index) in props.videoList.slice((page.currentPage - 1) * page.size, page.currentPage * page.size)"
:key="index"
>
<div class="video-info"> <div class="video-info">
<span class="name">{{ item.file?.name }}</span> <span class="name">{{ item.file?.name }}</span>
<el-progress style="width: 200px" :percentage="percentage(item.loaded)" class="view" /> <el-progress style="width: 200px" :percentage="item.progress" class="view" />
</div> </div>
</div> </div>
<el-pagination <el-pagination
...@@ -62,8 +42,7 @@ function percentage(value: number) { ...@@ -62,8 +42,7 @@ function percentage(value: number) {
:page-sizes="[5, 10, 20, 30, 50]" :page-sizes="[5, 10, 20, 30, 50]"
:total="props.videoList.length" :total="props.videoList.length"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange">
>
</el-pagination> </el-pagination>
</el-dialog> </el-dialog>
</template> </template>
......
src/modules/resource/video/components/ViewCenter.vue
浏览文件 @ 61dd28af
...@@ -2,15 +2,14 @@ ...@@ -2,15 +2,14 @@
import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue' import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
const props = defineProps(['data']) const props = defineProps(['data'])
const videoOptions = $computed(() => { const videoOptions = $computed(() => {
return { const playInfoList = props.data.play_auth.play_info_list
sources: [ let src = ''
{ if (Array.isArray(playInfoList)) {
src: props.data.play_auth.play_info_list.find((item: any) => { src = playInfoList.find((item: any) => item.Definition === 'SD')?.PlayURL
return item.Definition === 'SD' } else {
}).PlayURL src = playInfoList
}
]
} }
return { sources: [{ src }] }
}) })
</script> </script>
<template> <template>
......
src/modules/resource/video/views/BatchUpload.vue
浏览文件 @ 61dd28af
...@@ -39,13 +39,14 @@ const uploadMultipleVideoRef = $ref<InstanceType<typeof UploadMultipleVideo> | n ...@@ -39,13 +39,14 @@ const uploadMultipleVideoRef = $ref<InstanceType<typeof UploadMultipleVideo> | n
// } // }
// 上传视频成功 // 上传视频成功
const uploadVideo = (data: any) => { const uploadVideo = (data: any) => {
const { file, videoId } = data const { file } = data
const params = { const params = {
name: file.name.slice(0, file.name.lastIndexOf('.')), name: file.name.slice(0, file.name.lastIndexOf('.')),
source: '2', source: '2',
classification: form.classification, classification: form.classification,
knowledge_points: '', knowledge_points: '',
source_id: videoId, source_id: data.url,
size: file.size,
cover: '' cover: ''
} }
createVideo(params).then(() => { createVideo(params).then(() => {
...@@ -71,8 +72,7 @@ const goBack = function () { ...@@ -71,8 +72,7 @@ const goBack = function () {
:data="selectTree" :data="selectTree"
clearable clearable
placeholder="视频分类" placeholder="视频分类"
:default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []" :default-expanded-keys="selectTree.length ? [selectTree[0]?.id] : []" />
/>
</el-form-item> </el-form-item>
<el-form-item label="视频文件" prop="source_id" v-if="form.classification !== ''"> <el-form-item label="视频文件" prop="source_id" v-if="form.classification !== ''">
<UploadMultipleVideo @upload="uploadVideo" @canClose="handleClose" ref="uploadMultipleVideoRef" /> <UploadMultipleVideo @upload="uploadVideo" @canClose="handleClose" ref="uploadMultipleVideoRef" />
......
src/modules/resource/video/views/Update.vue
浏览文件 @ 61dd28af
...@@ -60,7 +60,7 @@ const swiperItemHandle = (url: string) => { ...@@ -60,7 +60,7 @@ const swiperItemHandle = (url: string) => {
// form表单 // form表单
let form = reactive({ let form = reactive({
data: { name: '', source: '2', classification: '', knowledge_points: '', cover: '', source_id: '' } data: { name: '', source: '2', classification: '', knowledge_points: '', cover: '', source_id: '', size: '' }
}) })
// 表单验证 // 表单验证
const rules = { const rules = {
...@@ -139,7 +139,8 @@ const protocol = ref(false) ...@@ -139,7 +139,8 @@ const protocol = ref(false)
// 上传视频成功 // 上传视频成功
const uploadVideo = (data: any) => { const uploadVideo = (data: any) => {
form.data.source_id = data.videoId form.data.source_id = data.url
form.data.size = data.file.size
const name = data.name const name = data.name
form.data.name = name.slice(0, name.lastIndexOf('.')) form.data.name = name.slice(0, name.lastIndexOf('.'))
} }
...@@ -192,7 +193,7 @@ const changeProtocol = (data: any) => { ...@@ -192,7 +193,7 @@ const changeProtocol = (data: any) => {
<el-icon :size="50" color="#ccc" v-if="form.data.cover == ''"> <el-icon :size="50" color="#ccc" v-if="form.data.cover == ''">
<PictureFilled></PictureFilled> <PictureFilled></PictureFilled>
</el-icon> </el-icon>
<div v-else class="cover-img" :style="`background-image:url(${form.data.cover})`"></div> <div v-else class="cover-img" :style="`background-image:url('${form.data.cover}')`"></div>
</div> </div>
<div class="video-cover_right"> <div class="video-cover_right">
<UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="form.data.cover"></UploadImg> <UploadImg accept=".jpg,.jpeg,.gif,.png" v-model="form.data.cover"></UploadImg>
......
src/utils/axios.ts
浏览文件 @ 61dd28af
...@@ -43,6 +43,14 @@ httpRequest.interceptors.response.use( ...@@ -43,6 +43,14 @@ httpRequest.interceptors.response.use(
ElMessage.error(data.message || data.msg) ElMessage.error(data.message || data.msg)
return Promise.reject(data) return Promise.reject(data)
} }
if (import.meta.env.VITE_STATIC_URL) {
try {
const regex = /(http|https):\/\/(.*?)saas-lab-api/gi
return JSON.parse(JSON.stringify(data).replaceAll(regex, import.meta.env.VITE_STATIC_URL))
} catch (error) {
console.log(error)
}
}
return data return data
}, },
function (error) { function (error) {
......
vite.config.ts
浏览文件 @ 61dd28af
...@@ -7,8 +7,8 @@ import vue from '@vitejs/plugin-vue' ...@@ -7,8 +7,8 @@ import vue from '@vitejs/plugin-vue'
// import checker from 'vite-plugin-checker' // import checker from 'vite-plugin-checker'
import AutoImport from 'unplugin-auto-import/vite' import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig(({ mode }) => ({ export default defineConfig(() => ({
base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/center-resource/' : '/', // base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/center-resource/' : '/',
plugins: [ plugins: [
vue({ reactivityTransform: true }), vue({ reactivityTransform: true }),
AutoImport({ AutoImport({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论