122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div style="overflow: hidden">
|
||
|
|
<a-upload
|
||
|
|
class="relative fix-capture"
|
||
|
|
name="file"
|
||
|
|
:show-upload-list="false"
|
||
|
|
list-type="picture-card"
|
||
|
|
:action="url"
|
||
|
|
:headers="fileHeader"
|
||
|
|
accept="image/*"
|
||
|
|
@change="handelChange"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
@click="deleteAvatar"
|
||
|
|
style="position: absolute; bottom: 10px; left: 0; z-index: 10"
|
||
|
|
>
|
||
|
|
<BaseIcon icon="vuesax-linear:trash" class="text-red-600 cursor-pointer" />
|
||
|
|
</div>
|
||
|
|
<div class="relative" v-if="imageUrl">
|
||
|
|
<img
|
||
|
|
:src="imageUrl"
|
||
|
|
alt="avatar"
|
||
|
|
style="min-width: 104px; max-height: 104px; object-fit: cover; display: inline"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div v-if="!imageUrl" class="flex flex-col items-center">
|
||
|
|
<span>
|
||
|
|
<slot name="TitlePic">افزودن عکس</slot>
|
||
|
|
</span>
|
||
|
|
<div v-if="loading" class="flex gap-4 items-center mt-2">
|
||
|
|
<loading-outlined></loading-outlined>
|
||
|
|
<span>{{ percent }} %</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a-upload>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { uploadURL } from '@root/config'
|
||
|
|
import { onMounted, ref, watch, computed } from 'vue'
|
||
|
|
import { LoadingOutlined } from '@ant-design/icons-vue'
|
||
|
|
import { message } from 'ant-design-vue'
|
||
|
|
import { getToken } from '@/utils'
|
||
|
|
|
||
|
|
const loading = ref<boolean>(false)
|
||
|
|
const percent = ref<number>(0)
|
||
|
|
const url = ref<string | undefined>(`${uploadURL}`)
|
||
|
|
const fileHeader = computed(() => ({
|
||
|
|
Authorization: `Bearer ${getToken()}`
|
||
|
|
}))
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
imageUrl?: string
|
||
|
|
compressed?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
compressed: false
|
||
|
|
})
|
||
|
|
const imageUrl = ref('')
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
(e: 'remove'): void
|
||
|
|
(e: 'upload', file: any): void
|
||
|
|
(e: 'startUpload'): void
|
||
|
|
(e: 'errorUpload'): void
|
||
|
|
}>()
|
||
|
|
|
||
|
|
function handelChange({ file, fileList }) {
|
||
|
|
if (Object.hasOwn(file, 'percent')) {
|
||
|
|
percent.value = Math.floor(file.percent)
|
||
|
|
}
|
||
|
|
fixUpload()
|
||
|
|
|
||
|
|
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') {
|
||
|
|
imageUrl.value = file.response.full_src
|
||
|
|
loading.value = false
|
||
|
|
emit('upload', file.response)
|
||
|
|
message.success('فایل با موفقیت آپلود شد')
|
||
|
|
} else if (fileList.status == 'removed') {
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function fixUpload() {
|
||
|
|
document.querySelectorAll('.fix-capture input').forEach((item) => {
|
||
|
|
item.removeAttribute('capture')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
fixUpload()
|
||
|
|
})
|
||
|
|
|
||
|
|
function deleteAvatar(e) {
|
||
|
|
imageUrl.value = null
|
||
|
|
emit('remove')
|
||
|
|
e.stopPropagation()
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.imageUrl,
|
||
|
|
() => {
|
||
|
|
imageUrl.value = props.imageUrl
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style></style>
|
||
|
|
|