调整后的ImageUpload组件无法正常使用且无法使用单个上传[#3344] (#3345)

* Update typing.ts

* 默认上传单个

* fix(ImageUpload): 修正图片单个上传&返回结果未进行处理
This commit is contained in:
1455668754 2023-11-27 09:17:19 +08:00 committed by GitHub
parent 97b76ea6bc
commit 8b516b75b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 34 additions and 8 deletions

View File

@ -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">

View File

@ -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>,

View File

@ -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',