feat: upload success
This commit is contained in:
yanghao05
@@ -22,6 +22,9 @@ const toast = useToast();
|
||||
// Add ref for upload dialog visibility
|
||||
const uploadDialogVisible = ref(false);
|
||||
|
||||
// Add ref for FileUpload component
|
||||
const fileUploadRef = ref(null);
|
||||
|
||||
// Function to open upload dialog
|
||||
const openUploadDialog = () => {
|
||||
uploadDialogVisible.value = true;
|
||||
@@ -63,17 +66,97 @@ const totalPages = computed(() => {
|
||||
// Sample data - in a real app, this would come from an API
|
||||
const mediaFiles = ref([]);
|
||||
|
||||
// File upload handling
|
||||
const onUpload = (event) => {
|
||||
toast.add({ severity: 'success', summary: '成功', detail: '文件上传成功', life: 3000 });
|
||||
// In a real app, you would process the files from event.files and update the mediaFiles list
|
||||
// Here we're just showing a success message
|
||||
// Add OSS upload token state
|
||||
const ossConfig = ref(null);
|
||||
|
||||
// Close the dialog after successful upload
|
||||
closeUploadDialog();
|
||||
// Add method to get OSS token
|
||||
const getOssToken = async () => {
|
||||
try {
|
||||
const response = await mediaService.getUploadToken();
|
||||
ossConfig.value = response;
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '错误', detail: '获取上传凭证失败', life: 3000 });
|
||||
}
|
||||
};
|
||||
|
||||
// Refresh the media files list
|
||||
fetchMediaFiles();
|
||||
const uploadProgress = ref(0);
|
||||
const isUploading = ref(false);
|
||||
const currentFile = ref(null);
|
||||
|
||||
// Add custom uploader method
|
||||
const customUploader = async (event) => {
|
||||
const { files } = event;
|
||||
|
||||
try {
|
||||
for (const file of files) {
|
||||
currentFile.value = file;
|
||||
isUploading.value = true;
|
||||
uploadProgress.value = 0;
|
||||
|
||||
// Get fresh token for each file
|
||||
await getOssToken();
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('success_action_status', '200');
|
||||
formData.append('policy', ossConfig.value.policy);
|
||||
formData.append('x-oss-signature', ossConfig.value.signature);
|
||||
formData.append('x-oss-signature-version', 'OSS4-HMAC-SHA256');
|
||||
formData.append('x-oss-credential', ossConfig.value.x_oss_credential);
|
||||
formData.append('x-oss-date', ossConfig.value.x_oss_date);
|
||||
formData.append('key', ossConfig.value.dir + file.name);
|
||||
formData.append('x-oss-security-token', ossConfig.value.security_token);
|
||||
formData.append('callback', ossConfig.value.callback);
|
||||
formData.append('file', file);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
uploadProgress.value = (e.loaded * 100) / e.total;
|
||||
}
|
||||
});
|
||||
|
||||
await new Promise((resolve, reject) => {
|
||||
xhr.onreadystatechange = () => {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
resolve(xhr.response);
|
||||
} else {
|
||||
reject(new Error(`Upload failed with status: ${xhr.status}`));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
xhr.open('POST', ossConfig.value.host, true);
|
||||
xhr.send(formData);
|
||||
});
|
||||
|
||||
// Create media record after successful upload
|
||||
// await mediaService.createMedia({
|
||||
// name: file.name,
|
||||
// file_size: file.size,
|
||||
// file_type: file.type,
|
||||
// url: `${ossConfig.value.host}/${ossConfig.value.dir}${file.name}`
|
||||
// });
|
||||
}
|
||||
|
||||
toast.add({ severity: 'success', summary: '成功', detail: '文件上传成功', life: 3000 });
|
||||
closeUploadDialog();
|
||||
fetchMediaFiles();
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '错误', detail: '文件上传失败', life: 3000 });
|
||||
// Use ref to clear the upload queue
|
||||
fileUploadRef.value.clear();
|
||||
} finally {
|
||||
isUploading.value = false;
|
||||
currentFile.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Add beforeUpload handler
|
||||
const onBeforeUpload = async (event) => {
|
||||
if (!ossConfig.value) {
|
||||
await getOssToken();
|
||||
}
|
||||
};
|
||||
|
||||
// Preview file
|
||||
@@ -131,6 +214,7 @@ const onPage = (event) => {
|
||||
|
||||
onMounted(() => {
|
||||
fetchMediaFiles();
|
||||
getOssToken();
|
||||
});
|
||||
|
||||
// File type badge severity mapping
|
||||
@@ -217,7 +301,7 @@ const formatFileSize = (bytes) => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Column field="name" header="文件名" sortable>
|
||||
<Column field="name" header="文件名">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center">
|
||||
<div v-if="data.thumbnail_url" class="flex-shrink-0 h-10 w-10 mr-3">
|
||||
@@ -232,15 +316,15 @@ const formatFileSize = (bytes) => {
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="upload_time" header="上传时间" sortable></Column>
|
||||
<Column field="upload_time" header="上传时间"></Column>
|
||||
|
||||
<Column field="file_size" header="文件大小" sortable>
|
||||
<Column field="file_size" header="文件大小">
|
||||
<template #body="{ data }">
|
||||
{{ formatFileSize(data.file_size) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="media_type" header="文件类型" sortable>
|
||||
<Column field="media_type" header="文件类型">
|
||||
<template #body="{ data }">
|
||||
<Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
|
||||
</template>
|
||||
@@ -269,19 +353,32 @@ const formatFileSize = (bytes) => {
|
||||
<!-- Upload Dialog -->
|
||||
<Dialog v-model:visible="uploadDialogVisible" header="上传媒体文件" :modal="true" :dismissableMask="true" :closable="true"
|
||||
:style="{ width: '50vw' }" :breakpoints="{ '960px': '75vw', '640px': '90vw' }">
|
||||
<FileUpload name="media[]" url="/api/upload" @upload="onUpload" :multiple="true"
|
||||
accept="image/*,video/*,audio/*,.pdf,.doc,.docx" :maxFileSize="50000000" class="w-full">
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center p-8">
|
||||
<i class="pi pi-cloud-upload text-5xl text-blue-500 mb-4"></i>
|
||||
<p class="text-gray-600 text-center mb-2">拖拽文件到此处或点击上传</p>
|
||||
<p class="text-gray-400 text-sm text-center">支持: MP4, JPG, PNG, GIF, MP4, PDF, DOC</p>
|
||||
<div class="flex flex-col gap-4">
|
||||
<FileUpload ref="fileUploadRef" name="file" :customUpload="true" @uploader="customUploader"
|
||||
@before-upload="onBeforeUpload" :multiple="true" accept="image/*,video/*,audio/*,.pdf,.doc,.docx"
|
||||
:maxFileSize="200 * 1000000" class="w-full" :auto="true" chooseLabel="选择文件">
|
||||
<template #empty>
|
||||
<div class="flex flex-col items-center justify-center p-8">
|
||||
<i class="pi pi-cloud-upload text-5xl! text-gray-500 mb-4"></i>
|
||||
<p class="text-gray-600 text-center mb-2">拖拽文件到此处或点击上传</p>
|
||||
<p class="text-gray-400 text-sm text-center">支持: MP4, JPG, PNG, GIF, MP4, PDF, DOC</p>
|
||||
</div>
|
||||
</template>
|
||||
</FileUpload>
|
||||
|
||||
<!-- Add progress bar -->
|
||||
<div v-if="isUploading" class="w-full">
|
||||
<div class="text-sm mb-2">正在上传: {{ currentFile?.name }}</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div class="bg-blue-600 h-2.5 rounded-full" :style="{ width: uploadProgress + '%' }"></div>
|
||||
</div>
|
||||
</template>
|
||||
</FileUpload>
|
||||
<div class="text-sm mt-2">{{ Math.round(uploadProgress) }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<Button label="取消" icon="pi pi-times" @click="closeUploadDialog" text severity="secondary" />
|
||||
<Button label="取消" icon="pi pi-times" @click="closeUploadDialog" text severity="secondary"
|
||||
:disabled="isUploading" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user