boursecu/boursecu_admin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix bug 4

Browse Source
This commit is contained in:
mohmdsdg
2026-07-16 17:55:08 +03:30
parent 59ad1106de
commit c7b3086547
5 changed files with 297 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ProductUploader/IndexImageUploader.vue
+51 -44
View File
@@ -19,6 +19,7 @@
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:custom-request="customRequest"
:file-list="fileList"
@change="handleChange"
@update:file-list="onFileListUpdate"
@@ -57,6 +58,7 @@
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:custom-request="customRequest"
:file-list="fileList"
@change="handleChange"
@update:file-list="onFileListUpdate"
@@ -91,7 +93,10 @@ import { uploadURL } from '@root/config'
import { getToken } from '@/utils'
import { fixFileCapture } from '@/utils/fixFileCapture'
import { normalizeUploadFileResponse } from '@/utils/file'
import { createWebpBeforeUpload } from '@/utils/prepareImageForUpload'
import {
createImageBeforeUpload,
createImageCustomRequest
} from '@/utils/prepareImageForUpload'
import { computed, onMounted, ref } from 'vue'
const { prefixCls } = usePrefix('index-image-uploader')
@@ -100,9 +105,9 @@ const previewImage = ref('')
const previewTitle = ref('تصویر شاخص')
const loading = ref(false)
const fileHeader = {
const fileHeader = computed(() => ({
Authorization: `Bearer ${getToken()}`
}
}))
interface Props {
fileList?: Array<FileList>
@@ -151,56 +156,58 @@ function removeImage() {
}
}
const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
message.error(msg)
)
function applyUploadedIndexImage(body: unknown) {
loading.value = false
const fileResource = normalizeUploadFileResponse(body)
if (!fileResource?.id || !fileResource.full_src) {
fileList.value = []
message.error('آپلود انجام شد ولی آدرس تصویر ساخته نشد')
return
}
fileList.value = [
{
uid: String(fileResource.id),
name: fileResource.name || 'image',
status: 'done',
url: fileResource.full_src,
thumbUrl: fileResource.full_src,
response: body
}
]
message.success('تصویر شاخص با موفقیت بارگذاری شد')
emits('ok', fileResource.id, body as Record<string, any>)
}
const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
action: () => uploadURL,
getHeaders: () => fileHeader.value,
messageError: (msg) => message.error(msg),
onStarted: () => {
loading.value = true
},
onUploaded: applyUploadedIndexImage,
onFailed: () => {
loading.value = false
fileList.value = []
}
})
function handleChange(info: UploadChangeParam) {
fixFileCapture()
const status = info.file.status
if (status === 'uploading') {
// success/error از onUploaded/onFailed اعمال می‌شود (fileList کنترل‌شده گاهی done را می‌بلعد)
if (info.file.status === 'uploading') {
loading.value = true
return
}
// هر وضعیت غیر از uploading باید اسپینر را ببندد (error/done/removed/undefined)
loading.value = false
if (status === 'error') {
fileList.value = []
const serverMsg =
(info.file.response as { message?: string } | undefined)?.message ||
(info.file.error as { message?: string } | undefined)?.message
message.error(serverMsg || 'خطا در بارگذاری تصویر')
return
}
if (status === 'done') {
const fileResource = normalizeUploadFileResponse(info.file.response)
if (!fileResource?.id || !fileResource.full_src) {
fileList.value = []
message.error('آپلود انجام شد ولی آدرس تصویر ساخته نشد')
return
}
fileList.value = [
{
...info.file,
uid: String(fileResource.id),
status: 'done',
url: fileResource.full_src,
thumbUrl: fileResource.full_src
}
]
message.success('تصویر شاخص با موفقیت بارگذاری شد')
emits('ok', fileResource.id, info.file.response)
return
}
if (status === 'removed') {
if (info.file.status === 'removed') {
loading.value = false
emits('delete', info.file.uid)
}
}
src/components/ProductUploader/ProductImageUploader.vue
+57 -34
View File
@@ -13,6 +13,7 @@
:headers="fileHeader"
:showUploadList="true"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="handleChange"
>
<div>
@@ -32,16 +33,19 @@ import {uploadURL} from '@root/config'
import {getToken} from '@/utils'
import {fixFileCapture} from '@/utils/fixFileCapture'
import {normalizeUploadFileResponse} from '@/utils/file'
import {createWebpBeforeUpload} from '@/utils/prepareImageForUpload'
import {
createImageBeforeUpload,
createImageCustomRequest
} from '@/utils/prepareImageForUpload'
import {usePrefix} from '@core/composable/usePrefix'
import {computed, onMounted, ref} from 'vue'
const {prefixCls} = usePrefix('product-image-uploader')
const loading = ref<boolean>(false)
const fileHeader = {
const fileHeader = computed(() => ({
Authorization: `Bearer ${getToken()}`
}
}))
interface Props {
fileList?: Array<FileList>
@@ -60,47 +64,66 @@ const fileList = computed({
}
})
const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
message.error(msg)
)
function applyUploadedProductImage(body: unknown, meta: { uid?: string }) {
loading.value = false
const fileResource = normalizeUploadFileResponse(body)
if (!fileResource?.id || !fileResource.full_src) {
if (meta.uid) {
fileList.value = fileList.value.filter((item) => item.uid !== meta.uid)
}
message.error('خطا در ساخت آدرس تصویر')
return
}
const doneItem = {
uid: String(fileResource.id),
name: fileResource.name || 'image',
status: 'done' as const,
url: fileResource.full_src,
thumbUrl: fileResource.full_src,
response: body
}
const matched = meta.uid && fileList.value.some((item) => item.uid === meta.uid)
fileList.value = matched
? fileList.value.map((item) => (item.uid === meta.uid ? doneItem : item))
: [
...fileList.value.filter((item) => item.status !== 'uploading'),
doneItem
]
message.success('تصویر با موفقیت بارگذاری شد')
emits('ok', fileResource.id, body)
}
const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
action: () => uploadURL,
getHeaders: () => fileHeader.value,
messageError: (msg) => message.error(msg),
onStarted: () => {
loading.value = true
},
onUploaded: applyUploadedProductImage,
onFailed: (_err, meta) => {
loading.value = false
if (meta.uid) {
fileList.value = fileList.value.filter((item) => item.uid !== meta.uid)
}
}
})
function handleChange(info: UploadChangeParam) {
fixFileCapture()
if (info.file.status === 'uploading') {
loading.value = true
return
}
if (info.file.status === 'error') {
loading.value = false
message.error('خطا در بارگذاری')
}
if (info.file.status === 'done') {
loading.value = false
const fileResource = normalizeUploadFileResponse(info.file.response)
if (!fileResource?.id || !fileResource.full_src) {
fileList.value = fileList.value.filter((item) => item.uid !== info.file.uid)
message.error('خطا در ساخت آدرس تصویر')
return
}
fileList.value = fileList.value.map((item) =>
item.uid === info.file.uid
? {
...item,
uid: String(fileResource.id),
status: 'done',
url: fileResource.full_src,
thumbUrl: fileResource.full_src,
}
: item,
)
message.success('تصویر با موفقیت بارگذاری شد')
emits('ok', fileResource.id, info.file.response)
}
if (info.file.status === 'removed') {
emits('delete', info.file.uid)
}
src/components/UploadPic.vue
+35 -23
View File
@@ -9,6 +9,7 @@
:headers="fileHeader"
accept="image/*"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="handelChange"
>
<div
@@ -45,7 +46,10 @@ import { message } from 'ant-design-vue'
import type { UploadProps } from 'ant-design-vue'
import { getToken } from '@/utils'
import { fixFileCapture } from '@/utils/fixFileCapture'
import { createWebpBeforeUpload } from '@/utils/prepareImageForUpload'
import {
createImageBeforeUpload,
createImageCustomRequest
} from '@/utils/prepareImageForUpload'
import { normalizeUploadFileResponse, toAbsoluteFileUrl } from '@/utils/file'
const loading = ref<boolean>(false)
@@ -72,37 +76,45 @@ const emit = defineEmits<{
(e: 'errorUpload'): void
}>()
const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
message.error(msg)
)
function handelChange({ file, fileList }) {
if (Object.hasOwn(file, 'percent')) {
const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
action: () => url.value || uploadURL,
getHeaders: () => fileHeader.value,
messageError: (msg) => message.error(msg),
onStarted: () => {
loading.value = true
percent.value = 0
emit('startUpload')
},
onUploaded: (body) => {
const fileResource = normalizeUploadFileResponse(body)
const record = body && typeof body === 'object' ? (body as Record<string, any>) : undefined
imageUrl.value =
fileResource?.full_src ||
toAbsoluteFileUrl(record?.full_src || record?.src) ||
''
loading.value = false
percent.value = 100
emit('upload', body)
message.success('فایل با موفقیت آپلود شد')
},
onFailed: () => {
loading.value = false
emit('errorUpload')
}
})
function handelChange({ file }) {
if (Object.hasOwn(file, 'percent') && file.percent != null) {
percent.value = Math.floor(file.percent)
}
fixFileCapture()
if (file.status === 'uploading') {
loading.value = true
emit('startUpload')
return
}
if (file.status === 'error') {
loading.value = false
emit('errorUpload')
message.error('خطا در آپلود فایل')
}
if (file.status == 'done') {
const fileResource = normalizeUploadFileResponse(file.response)
imageUrl.value =
fileResource?.full_src ||
toAbsoluteFileUrl(file.response?.full_src || file.response?.src) ||
''
loading.value = false
emit('upload', file.response)
message.success('فایل با موفقیت آپلود شد')
} else if (fileList.status == 'removed') {
}
}
src/pages/menuPages/banners/components/BannerImageUpload.vue
+24 -15
View File
@@ -9,6 +9,7 @@
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="onChange"
>
<div class="banner-image-upload__empty">
@@ -34,6 +35,7 @@
:action="uploadURL"
:headers="fileHeader"
:before-upload="beforeUpload"
:custom-request="customRequest"
@change="onChange"
>
<button type="button" class="banner-image-upload__btn banner-image-upload__btn--primary">
@@ -58,7 +60,10 @@ import { message } from 'ant-design-vue'
import { uploadURL } from '@root/config'
import { getToken } from '@/utils'
import { normalizeUploadFileResponse } from '@/utils/file'
import { createWebpBeforeUpload } from '@/utils/prepareImageForUpload'
import {
createImageBeforeUpload,
createImageCustomRequest
} from '@/utils/prepareImageForUpload'
import type { UploadProps } from 'ant-design-vue'
defineProps<{
@@ -76,31 +81,35 @@ const fileHeader = computed(() => ({
Authorization: `Bearer ${getToken()}`,
}))
const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
const beforeUpload: UploadProps['beforeUpload'] = createImageBeforeUpload((msg) =>
message.error(msg)
)
function onChange({ file }: { file: { status?: string; response?: unknown } }) {
if (file.status === 'uploading') {
const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
action: () => uploadURL,
getHeaders: () => fileHeader.value,
messageError: (msg) => message.error(msg),
onStarted: () => {
loading.value = true
return
}
if (file.status === 'error') {
},
onUploaded: (body) => {
loading.value = false
message.error('خطا در آپلود تصویر')
return
}
if (file.status === 'done') {
loading.value = false
const fileResource = normalizeUploadFileResponse(file.response)
const fileResource = normalizeUploadFileResponse(body)
if (!fileResource?.full_src) {
message.error('خطا در ساخت آدرس تصویر')
return
}
emit('upload', fileResource.full_src)
message.success('تصویر با موفقیت آپلود شد')
},
onFailed: () => {
loading.value = false
}
})
function onChange({ file }: { file: { status?: string } }) {
if (file.status === 'uploading') {
loading.value = true
}
}
</script>
src/utils/prepareImageForUpload.ts
+130 -26
View File
@@ -1,13 +1,18 @@
import type { UploadProps } from 'ant-design-vue'
import { Upload } from 'ant-design-vue'
/** حداکثر حجم مجاز فایل ورودی و خروجی آپلود (۱ مگابایت) */
/** حداکثر حجم فایل خروجی آپلود (۱ مگابایت) */
export const MAX_UPLOAD_IMAGE_BYTES = 1024 * 1024
/** حداکثر حجم فایل ورودی قبل از فشرده‌سازی (۲۵ مگابایت) */
export const MAX_SOURCE_IMAGE_BYTES = 25 * 1024 * 1024
const MAX_DIMENSION = 1920
const QUALITY_STEPS = [0.86, 0.78, 0.7, 0.62, 0.54, 0.46]
const UPLOAD_TIMEOUT_MS = 60_000
function stripExtension(name: string): string {
return name.replace(/\.[^.]+$/u, '') || 'image'
return name.replace(/\.(png|jpe?g|webp|gif|bmp|heic|heif)+$/iu, '') || 'image'
}
function loadImageElement(file: File): Promise<HTMLImageElement> {
@@ -36,10 +41,7 @@ function canvasToBlob(
})
}
function drawScaled(
img: HTMLImageElement,
maxDimension: number
): HTMLCanvasElement {
function drawScaled(img: HTMLImageElement, maxDimension: number): HTMLCanvasElement {
const scale = Math.min(1, maxDimension / Math.max(img.naturalWidth, img.naturalHeight))
const width = Math.max(1, Math.round(img.naturalWidth * scale))
const height = Math.max(1, Math.round(img.naturalHeight * scale))
@@ -78,7 +80,7 @@ async function encodeWebpUnderLimit(
/**
* تصویر را به WebP تبدیل می‌کند (با کاهش کیفیت/ابعاد در صورت نیاز)
* و برای آپلود آماده می‌کند. اگر ورودی از قبل WebP و زیر سقف باشد، همان را برمی‌گرداند.
* و برای آپلود آماده می‌کند. خروجی همیشه ≤ maxBytes است.
*/
export async function prepareImageForUpload(
file: File,
@@ -92,8 +94,8 @@ export async function prepareImageForUpload(
throw new Error('فقط فایل تصویری مجاز است')
}
if (file.size > maxBytes) {
throw new Error('حداکثر حجم بارگذاری ۱ مگابایت می‌باشد')
if (file.size > MAX_SOURCE_IMAGE_BYTES) {
throw new Error('حجم فایل انتخابی بیش از حد مجاز است (حداکثر ۲۵ مگابایت)')
}
if (file.type === 'image/webp' && file.size <= maxBytes) {
@@ -110,25 +112,127 @@ export async function prepareImageForUpload(
})
}
/** برای beforeUpload آنت‌دیزاین: تبدیل به WebP یا رد آپلود */
export async function beforeUploadConvertToWebp(file: File) {
try {
return await prepareImageForUpload(file)
} catch (error) {
const msg = error instanceof Error ? error.message : 'خطا در آماده‌سازی تصویر'
return Promise.reject(msg)
/** اعتبارسنجی سریع قبل از customRequest */
export function createImageBeforeUpload(messageError: (msg: string) => void) {
return (file: File) => {
if (!file?.type?.startsWith('image/')) {
messageError('فقط فایل تصویری مجاز است')
return Upload.LIST_IGNORE
}
if (file.size > MAX_SOURCE_IMAGE_BYTES) {
messageError('حجم فایل انتخابی بیش از حد مجاز است (حداکثر ۲۵ مگابایت)')
return Upload.LIST_IGNORE
}
return true
}
}
/** نسخهٔ مناسب ant-design Upload با پیام خطا و LIST_IGNORE */
export function createWebpBeforeUpload(messageError: (msg: string) => void) {
return async (file: File) => {
try {
return await prepareImageForUpload(file)
} catch (error) {
const msg = error instanceof Error ? error.message : 'خطا در آماده‌سازی تصویر'
messageError(msg)
return Upload.LIST_IGNORE
}
type CustomRequestOption = Parameters<NonNullable<UploadProps['customRequest']>>[0]
function parseXhrBody(xhr: XMLHttpRequest): unknown {
const text = xhr.responseText
if (!text) return xhr.response ?? null
try {
return JSON.parse(text)
} catch {
return text
}
}
/**
* تبدیل به WebP + آپلود با XHR و تایم‌اوت — جایگزین action پیش‌فرض آنت‌دیزاین.
*
* `onUploaded` / `onFailed` مستقل از وضعیت داخلی ant-design-vue صدا زده می‌شوند؛
* با fileList کنترل‌شده، گاهی `onSuccess` آنت به‌خاطر getFileItem ساکت می‌ماند
* و UI روی «در حال بارگذاری» گیر می‌کند.
*/
export function createImageCustomRequest(options: {
action: string | (() => string)
getHeaders: () => Record<string, string>
messageError: (msg: string) => void
timeoutMs?: number
onStarted?: () => void
onUploaded?: (body: unknown, meta: { uid?: string }) => void
onFailed?: (error: Error, meta: { uid?: string }) => void
}): UploadProps['customRequest'] {
return (opt: CustomRequestOption) => {
const { file, onSuccess, onError, onProgress } = opt
const action = typeof options.action === 'function' ? options.action() : options.action
const timeoutMs = options.timeoutMs ?? UPLOAD_TIMEOUT_MS
const uid = (file as File & { uid?: string })?.uid
options.onStarted?.()
void (async () => {
try {
const prepared = await prepareImageForUpload(file as File)
const formData = new FormData()
formData.append('file', prepared)
await new Promise<void>((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open('POST', action)
xhr.timeout = timeoutMs
// text + JSON.parse دستی؛ responseType=json گاهی body را null می‌کند
const headers = options.getHeaders()
Object.entries(headers).forEach(([key, value]) => {
if (value) {
xhr.setRequestHeader(key, value)
}
})
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) {
onProgress?.({
...event,
percent: Math.round((event.loaded / event.total) * 100)
})
}
}
xhr.onload = () => {
const body = parseXhrBody(xhr)
if (xhr.status >= 200 && xhr.status < 300) {
try {
onSuccess?.(body, xhr)
} catch {
// ant ممکن است به‌خاطر fileList کنترل‌شده throw/no-op کند
}
options.onUploaded?.(body, { uid })
resolve()
return
}
const msg =
(body && typeof body === 'object' && 'message' in body && String((body as { message: unknown }).message)) ||
`خطای سرور (${xhr.status})`
reject(new Error(msg))
}
xhr.onerror = () => reject(new Error('خطای شبکه در آپلود'))
xhr.ontimeout = () =>
reject(new Error('زمان آپلود به پایان رسید — لطفاً دوباره تلاش کنید'))
xhr.onabort = () => reject(new Error('آپلود لغو شد'))
xhr.send(formData)
})
} catch (error) {
const err = error instanceof Error ? error : new Error('خطا در آماده‌سازی تصویر')
options.messageError(err.message)
try {
onError?.(err)
} catch {
// ignore ant internal errors
}
options.onFailed?.(err, { uid })
}
})()
}
}
/** @deprecated از createImageBeforeUpload + createImageCustomRequest استفاده کنید */
export function createWebpBeforeUpload(messageError: (msg: string) => void) {
return createImageBeforeUpload(messageError)
}