diff --git a/apps/web-antd/src/adapter/component/index.ts b/apps/web-antd/src/adapter/component/index.ts index 0f002700..f319ad1d 100644 --- a/apps/web-antd/src/adapter/component/index.ts +++ b/apps/web-antd/src/adapter/component/index.ts @@ -424,7 +424,16 @@ const withPreviewUpload = () => { return attrs.beforeUpload?.(file) ?? true; }; - const handleChange = async (event: UploadChangeParam) => { + const handleChange = (event: UploadChangeParam) => { + try { + // 行内写法 handleChange: (event) => {} + attrs.handleChange?.(event); + // template写法 @handle-change="(event) => {}" + attrs.onHandleChange?.(event); + } catch (error) { + // Avoid breaking internal v-model sync on user handler errors + console.error(error); + } fileList.value = event.fileList.filter( (file) => file.status !== 'removed', ); diff --git a/playground/src/adapter/component/index.ts b/playground/src/adapter/component/index.ts index 0f002700..f319ad1d 100644 --- a/playground/src/adapter/component/index.ts +++ b/playground/src/adapter/component/index.ts @@ -424,7 +424,16 @@ const withPreviewUpload = () => { return attrs.beforeUpload?.(file) ?? true; }; - const handleChange = async (event: UploadChangeParam) => { + const handleChange = (event: UploadChangeParam) => { + try { + // 行内写法 handleChange: (event) => {} + attrs.handleChange?.(event); + // template写法 @handle-change="(event) => {}" + attrs.onHandleChange?.(event); + } catch (error) { + // Avoid breaking internal v-model sync on user handler errors + console.error(error); + } fileList.value = event.fileList.filter( (file) => file.status !== 'removed', ); diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 40f5930d..52d04319 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -348,6 +348,15 @@ const [BaseForm, baseFormApi] = useVbenForm({ showUploadList: true, // 上传列表的内建样式,支持四种基本样式 text, picture, picture-card 和 picture-circle listType: 'picture-card', + // onChange事件已被重写,如需自定义请在此基础上扩展 + handleChange: ({ file }: { file: UploadFile }) => { + const { name, status } = file; + if (status === 'done') { + message.success(`${name} ${$t('examples.form.upload-success')}`); + } else if (status === 'error') { + message.error(`${name} ${$t('examples.form.upload-fail')}`); + } + }, }, fieldName: 'files', label: $t('examples.form.file'),