|
|
|
@ -26,8 +26,8 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref, toRefs, watch } from 'vue'; |
|
|
|
import { PlusOutlined } from '@ant-design/icons-vue'; |
|
|
|
import { Upload, Modal } from 'ant-design-vue'; |
|
|
|
import type { UploadProps, UploadFile } from 'ant-design-vue'; |
|
|
|
import type { UploadFile, UploadProps } from 'ant-design-vue'; |
|
|
|
import { Modal, Upload } from 'ant-design-vue'; |
|
|
|
import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface'; |
|
|
|
import { useMessage } from '@/hooks/web/useMessage'; |
|
|
|
import { isArray, isFunction, isObject, isString } from '@/utils/is'; |
|
|
|
@ -36,6 +36,7 @@ |
|
|
|
import { useUploadType } from '../hooks/useUpload'; |
|
|
|
import { uploadContainerProps } from '../props'; |
|
|
|
import { isImgTypeByName } from '../helper'; |
|
|
|
import { UploadResultStatus } from '@/components/Upload/src/types/typing'; |
|
|
|
|
|
|
|
defineOptions({ name: 'ImageUpload' }); |
|
|
|
|
|
|
|
@ -46,6 +47,7 @@ |
|
|
|
const { t } = useI18n(); |
|
|
|
const { createMessage } = useMessage(); |
|
|
|
const { accept, helpText, maxNumber, maxSize } = toRefs(props); |
|
|
|
const isInnerOperate = ref<boolean>(false); |
|
|
|
const { getStringAccept } = useUploadType({ |
|
|
|
acceptRef: accept, |
|
|
|
helpTextRef: helpText, |
|
|
|
@ -63,8 +65,18 @@ |
|
|
|
watch( |
|
|
|
() => props.value, |
|
|
|
(v) => { |
|
|
|
if (v && isArray(v)) { |
|
|
|
fileList.value = v.map((item, i) => { |
|
|
|
if (isInnerOperate.value) { |
|
|
|
isInnerOperate.value = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
if (v) { |
|
|
|
let value: string[] = []; |
|
|
|
if (isArray(v)) { |
|
|
|
value = v; |
|
|
|
} else { |
|
|
|
value.push(v); |
|
|
|
} |
|
|
|
fileList.value = value.map((item, i) => { |
|
|
|
if (item && isString(item)) { |
|
|
|
return { |
|
|
|
uid: -i + '', |
|
|
|
@ -107,7 +119,9 @@ |
|
|
|
if (fileList.value) { |
|
|
|
const index = fileList.value.findIndex((item) => item.uid === file.uid); |
|
|
|
index !== -1 && fileList.value.splice(index, 1); |
|
|
|
emit('change', fileList.value); |
|
|
|
const value = getValue(); |
|
|
|
isInnerOperate.value = true; |
|
|
|
emit('change', value); |
|
|
|
emit('delete', file); |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -152,12 +166,23 @@ |
|
|
|
filename: props.filename, |
|
|
|
}); |
|
|
|
info.onSuccess!(res.data); |
|
|
|
emit('change', fileList.value); |
|
|
|
const value = getValue(); |
|
|
|
isInnerOperate.value = true; |
|
|
|
emit('change', value); |
|
|
|
} catch (e: any) { |
|
|
|
console.log(e); |
|
|
|
info.onError!(e); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function getValue() { |
|
|
|
const list = (fileList.value || []) |
|
|
|
.filter((item) => item?.status === UploadResultStatus.DONE) |
|
|
|
.map((item: any) => { |
|
|
|
return item?.url || item?.response?.url; |
|
|
|
}); |
|
|
|
return props.multiple ? list : list.length > 0 ? list[0] : ''; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less"> |
|
|
|
|