rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 实现多部分上传功能，支持初始化、上传部分、完成和中止上传，添加媒体资产删除功能

Browse Source
This commit is contained in:
Rogee
2026-01-04 15:20:06 +08:00
parent 2ab1238ef7
commit 2438d363f5
9 changed files with 454 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/portal/src/views/creator/ContentsEditView.vue
View File

@@ -102,7 +102,7 @@
<template #item="{ element: img, index }">
<div class="relative group w-48 aspect-video rounded-lg overflow-hidden bg-slate-100 border border-slate-200 cursor-move">
<Image :src="img.url" preview imageClass="w-full h-full object-cover" />
<button @click="removeCover(index)"
<button @click="removeMediaItem('cover', index, img)"
class="absolute top-1 right-1 w-6 h-6 bg-black/50 hover:bg-red-500 text-white rounded-full flex items-center justify-center transition-colors cursor-pointer z-10"><i
class="pi pi-times text-xs"></i></button>
</div>
@@ -129,7 +129,7 @@
<div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
<div class="text-xs text-slate-500">{{ file.size }}</div>
</div>
<button @click="removeMedia('videos', index)"
<button @click="removeMediaItem('videos', index, file)"
class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
class="pi pi-trash"></i></button>
</div>
@@ -155,7 +155,7 @@
<div class="font-bold text-sm text-slate-900 truncate">{{ file.name }}</div>
<div class="text-xs text-slate-500">{{ file.size }}</div>
</div>
<button @click="removeMedia('audios', index)"
<button @click="removeMediaItem('audios', index, file)"
class="text-slate-400 hover:text-red-500 px-2 cursor-pointer"><i
class="pi pi-trash"></i></button>
</div>
@@ -179,7 +179,7 @@
<div
class="absolute bottom-0 left-0 w-full bg-black/60 text-white text-xs p-1 truncate text-center pointer-events-none">
{{ file.name }}</div>
<button @click="removeMedia('images', index)"
<button @click="removeMediaItem('images', index, file)"
class="absolute top-1 right-1 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer z-10"><i
class="pi pi-times text-xs"></i></button>
</div>
@@ -207,6 +207,7 @@ import ProgressBar from 'primevue/progressbar';
import Image from 'primevue/image';
import Toast from 'primevue/toast';
import draggable from 'vuedraggable';
import { sha256 } from 'js-sha256';
import { useToast } from 'primevue/usetoast';
import { computed, reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
@@ -254,12 +255,12 @@ const loadContent = async (id) => {
form.genre = res.genre;
form.title = res.title;
form.key = res.key;
form.abstract = res.description;
form.price = res.price;
form.priceType = res.price > 0 ? 'paid' : 'free';
form.enableTrial = res.enable_trial;
form.trialTime = res.preview_seconds;
form.key = res.key;
// Parse Assets
if (res.assets) {
@@ -292,9 +293,7 @@ const triggerUpload = (type) => {
const calculateHash = async (file) => {
const buffer = await file.arrayBuffer();
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
const hashArray = Array.from(new Uint8Array(hashBuffer));
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return sha256(buffer);
};
const handleFileChange = async (event) => {
@@ -314,22 +313,29 @@ const handleFileChange = async (event) => {
if (currentUploadType.value === 'audio') type = 'audio';
if (currentUploadType.value === 'cover') type = 'image';
// Check Hash first
const hash = await calculateHash(file);
let res;
try {
res = await commonApi.checkHash(hash);
} catch (e) {
// Not found or error, proceed to upload
}
if (!res) {
res = await commonApi.uploadWithProgress(file, type, (progress) => {
if (type === 'video' || type === 'audio') {
// Multipart upload for large files
res = await commonApi.uploadMultipart(file, hash, (progress) => {
uploadProgress.value = Math.round(progress);
});
} else {
// Instant completion if hash found
uploadProgress.value = 100;
// Simple upload for images
try {
res = await commonApi.checkHash(hash);
} catch (e) {
// Not found or error, proceed to upload
}
if (!res) {
res = await commonApi.uploadWithProgress(file, type, (progress) => {
uploadProgress.value = Math.round(progress);
});
} else {
uploadProgress.value = 100;
}
}
// res: { id, url, ... }
@@ -355,8 +361,22 @@ const handleFileChange = async (event) => {
}
};
const removeCover = (idx) => form.covers.splice(idx, 1);
const removeMedia = (type, idx) => form[type].splice(idx, 1);
const removeMediaItem = async (type, index, item) => {
if (item.id) {
try {
await commonApi.deleteMedia(item.id);
} catch (e) {
console.error(e);
toast.add({ severity: 'error', summary: '删除失败', detail: '无法删除文件', life: 3000 });
return;
}
}
if (type === 'cover') {
form.covers.splice(index, 1);
} else {
form[type].splice(index, 1);
}
};
const submit = async () => {
if (!form.title || !form.genre) {