mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-24 10:33:50 +08:00
* Update typing.ts * 默认上传单个 * fix(ImageUpload): 修正图片单个上传&返回结果未进行处理
This commit is contained in:
parent
97b76ea6bc
commit
8b516b75b8
@ -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">
|
||||
|
@ -32,7 +32,7 @@ export const basicProps = {
|
||||
// 最大数量的文件,Infinity不限制
|
||||
maxNumber: {
|
||||
type: Number as PropType<number>,
|
||||
default: Infinity,
|
||||
default: 1,
|
||||
},
|
||||
// 根据后缀,或者其他
|
||||
accept: {
|
||||
@ -41,7 +41,7 @@ export const basicProps = {
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: true,
|
||||
default: false,
|
||||
},
|
||||
uploadParams: {
|
||||
type: Object as PropType<any>,
|
||||
|
@ -2,6 +2,7 @@ import { BasicColumn } from '@/components/Table';
|
||||
import { UploadApiResult } from '@/api/sys/model/uploadModel';
|
||||
|
||||
export enum UploadResultStatus {
|
||||
DONE = 'done',
|
||||
SUCCESS = 'success',
|
||||
ERROR = 'error',
|
||||
UPLOADING = 'uploading',
|
||||
|
Loading…
Reference in New Issue
Block a user