feat: 实现多部分上传功能，支持初始化、上传部分、完成和中止上传，添加媒体资产删除功能
This commit is contained in:
@@ -3,12 +3,62 @@ import { request } from '../utils/request';
|
||||
export const commonApi = {
|
||||
getOptions: () => request('/common/options'),
|
||||
checkHash: (hash) => request(`/upload/check?hash=${hash}`),
|
||||
deleteMedia: (id) => request(`/media-assets/${id}`, { method: 'DELETE' }),
|
||||
upload: (file, type) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('type', type);
|
||||
return request('/upload', { method: 'POST', body: formData });
|
||||
},
|
||||
uploadMultipart: async (file, hash, onProgress) => {
|
||||
// 1. Check Hash
|
||||
try {
|
||||
const res = await commonApi.checkHash(hash);
|
||||
if (res) {
|
||||
if (onProgress) onProgress(100);
|
||||
return res;
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
// 2. Init
|
||||
const initRes = await request('/upload/init', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
filename: file.name,
|
||||
size: file.size,
|
||||
mime_type: file.type,
|
||||
hash: hash
|
||||
}
|
||||
});
|
||||
|
||||
const { upload_id, chunk_size } = initRes;
|
||||
const totalChunks = Math.ceil(file.size / chunk_size);
|
||||
|
||||
// 3. Upload Parts
|
||||
for (let i = 0; i < totalChunks; i++) {
|
||||
const start = i * chunk_size;
|
||||
const end = Math.min(start + chunk_size, file.size);
|
||||
const chunk = file.slice(start, end);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', chunk);
|
||||
formData.append('upload_id', upload_id);
|
||||
formData.append('part_number', i + 1);
|
||||
|
||||
await request('/upload/part', { method: 'POST', body: formData });
|
||||
|
||||
if (onProgress) {
|
||||
const percent = Math.round(((i + 1) / totalChunks) * 100);
|
||||
onProgress(percent);
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Complete
|
||||
return request('/upload/complete', {
|
||||
method: 'POST',
|
||||
body: { upload_id }
|
||||
});
|
||||
},
|
||||
uploadWithProgress: (file, type, onProgress) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const formData = new FormData();
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user