feat: upload success
This commit is contained in:
yanghao05
11
frontend/admin/src/api/get_oss_upload_token.json
Normal file
11
frontend/admin/src/api/get_oss_upload_token.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"policy": "eyJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJyb2dlZS10ZXN0In0seyJ4LW9zcy1zaWduYXR1cmUtdmVyc2lvbiI6Ik9TUzQtSE1BQy1TSEEyNTYifSx7Ingtb3NzLWNyZWRlbnRpYWwiOiJMVEFJNXQ4NlNqaVA5elJkM3EydzdqUU4vMjAyNTA0MDgvY24tYmVpamluZy9vc3MvYWxpeXVuX3Y0X3JlcXVlc3QifSx7Ingtb3NzLWRhdGUiOiIyMDI1MDQwOFQxMTUxMzZaIn0seyJ4LW9zcy1zZWN1cml0eS10b2tlbiI6IiJ9XSwiZXhwaXJhdGlvbiI6IjIwMjUtMDQtMDhUMTI6NTE6MzYuNjEzWiJ9",
|
||||
"security_token": "",
|
||||
"x_oss_signature_version": "OSS4-HMAC-SHA256",
|
||||
"x_oss_credential": "LTAI5t86SjiP9zRd3q2w7jQN/20250408/cn-beijing/oss/aliyun_v4_request",
|
||||
"x_oss_date": "20250408T115136Z",
|
||||
"signature": "e18146794197eb767ad4910b35997192ea04a006fbff58252f1ed66aaae1bdfd",
|
||||
"host": "abc",
|
||||
"dir": "quyun/",
|
||||
"callback": "eyJjYWxsYmFja1VybCI6Imh0dHBzOi8vbG9jYWxob3N0IiwiY2FsbGJhY2tCb2R5IjoiZmlsZW5hbWU9JHtvYmplY3R9XHUwMDI2c2l6ZT0ke3NpemV9XHUwMDI2bWltZVR5cGU9JHttaW1lVHlwZX1cdTAwMjZoZWlnaHQ9JHtpbWFnZUluZm8uaGVpZ2h0fVx1MDAyNndpZHRoPSR7aW1hZ2VJbmZvLndpZHRofSIsImNhbGxiYWNrQm9keVR5cGUiOiJhcHBsaWNhdGlvbi94LXd3dy1mb3JtLXVybGVuY29kZWQifQ=="
|
||||
}
|
||||
@@ -6,4 +6,12 @@ export const mediaService = {
|
||||
params: { page, limit }
|
||||
});
|
||||
},
|
||||
|
||||
getUploadToken() {
|
||||
return httpClient.get('/admin/uploads/token');
|
||||
},
|
||||
|
||||
createMedia(mediaInfo) {
|
||||
return httpClient.post('/admin/medias', mediaInfo);
|
||||
}
|
||||
};
|
||||
@@ -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