fix: 修复 FormImageUpload 上传多张图片失败的问题

ant-design · Feb 19, 2024 · e8f63c9 · e8f63c9
1 parent ded72c0
commit e8f63c9
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 6 deletions.
diff --git a/compiled/alipay/src/Form/FormImageUpload/index.axml b/compiled/alipay/src/Form/FormImageUpload/index.axml
@@ -11,7 +11,8 @@
   validateStatus="{{ validateStatus }}"
   help="{{ help }}">
   <image-upload
-    fileList="{{ formData.value }}"
+    ref="handleRef"
+    defaultFileList="{{ formData.value }}"
     maxCount="{{ maxCount }}"
     imageMode="{{ imageMode }}"
     sourceType="{{ sourceType }}"

diff --git a/compiled/alipay/src/Form/FormImageUpload/index.ts b/compiled/alipay/src/Form/FormImageUpload/index.ts
@@ -1,14 +1,30 @@
-import { useEvent } from 'functional-mini/component';
+import { useEvent, useRef, useEffect } from 'functional-mini/component';
 import { mountComponent } from '../../_util/component';
 import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
 import { useHandleCustomEvent } from '../../_util/hooks/useHandleCustomEvent';
 import { useFormItem } from '../use-form-item';
 import { FormImageUploadDefaultProps, FormImageUploadProps } from './props';
 
+interface ImageUploadRef {
+  update(value: string);
+}
+
 const FormImageUpload = (props: FormImageUploadProps) => {
   const { formData, emit } = useFormItem(props);
   const { triggerEvent } = useComponentEvent(props);
 
+  const imageUploadRef = useRef<ImageUploadRef>();
+
+  useHandleCustomEvent('handleRef', (imageUpload: ImageUploadRef) => {
+    imageUploadRef.current = imageUpload;
+  });
+
+  useEffect(() => {
+    if (imageUploadRef.current) {
+      imageUploadRef.current.update(formData.value);
+    }
+  }, [formData.value]);
+
   useHandleCustomEvent('onChange', (value) => {
     emit('onChange', value);
     triggerEvent('change', value);

diff --git a/compiled/alipay/src/ImageUpload/index.ts b/compiled/alipay/src/ImageUpload/index.ts
@@ -177,6 +177,13 @@ const ImageUpload = (props: IUploaderProps) => {
     triggerEvent('preview', file);
   });
 
+  useEvent('update', (e) => {
+    if (isControlled) {
+      return;
+    }
+    update(e);
+  });
+
   return {
     mixin: {
       value: fileList,

diff --git a/compiled/wechat/src/Form/FormImageUpload/index.js b/compiled/wechat/src/Form/FormImageUpload/index.js
@@ -1,4 +1,4 @@
-import { useEvent } from 'functional-mini/component';
+import { useEvent, useRef, useEffect } from 'functional-mini/component';
 import { mountComponent } from '../../_util/component';
 import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
 import { useHandleCustomEvent } from '../../_util/hooks/useHandleCustomEvent';
@@ -7,6 +7,15 @@ import { FormImageUploadDefaultProps } from './props';
 var FormImageUpload = function (props) {
     var _a = useFormItem(props), formData = _a.formData, emit = _a.emit;
     var triggerEvent = useComponentEvent(props).triggerEvent;
+    var imageUploadRef = useRef();
+    useHandleCustomEvent('handleRef', function (imageUpload) {
+        imageUploadRef.current = imageUpload;
+    });
+    useEffect(function () {
+        if (imageUploadRef.current) {
+            imageUploadRef.current.update(formData.value);
+        }
+    }, [formData.value]);
     useHandleCustomEvent('onChange', function (value) {
         emit('onChange', value);
         triggerEvent('change', value);

diff --git a/compiled/wechat/src/Form/FormImageUpload/index.wxml b/compiled/wechat/src/Form/FormImageUpload/index.wxml
@@ -11,7 +11,8 @@
   validateStatus="{{ validateStatus }}"
   help="{{ help }}">
   <image-upload
-    fileList="{{ formData.value }}"
+    bind:ref="handleRef"
+    defaultFileList="{{ formData.value }}"
     maxCount="{{ maxCount }}"
     imageMode="{{ imageMode }}"
     sourceType="{{ sourceType }}"

diff --git a/compiled/wechat/src/ImageUpload/index.js b/compiled/wechat/src/ImageUpload/index.js
@@ -254,6 +254,12 @@ var ImageUpload = function (props) {
         var file = fileList.find(function (item) { return item.uid === uid; });
         triggerEvent('preview', file);
     });
+    useEvent('update', function (e) {
+        if (isControlled) {
+            return;
+        }
+        update(e);
+    });
     return {
         mixin: {
             value: fileList,

diff --git a/src/Form/FormImageUpload/index.axml.tsx b/src/Form/FormImageUpload/index.axml.tsx
@@ -41,7 +41,8 @@ export default (
       help={help}
     >
       <ImageUpload
-        fileList={formData.value}
+        ref="handleRef"
+        defaultFileList={formData.value}
         maxCount={maxCount}
         imageMode={imageMode}
         sourceType={sourceType}

diff --git a/src/Form/FormImageUpload/index.ts b/src/Form/FormImageUpload/index.ts
@@ -1,14 +1,30 @@
-import { useEvent } from 'functional-mini/component';
+import { useEvent, useRef, useEffect } from 'functional-mini/component';
 import { mountComponent } from '../../_util/component';
 import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
 import { useHandleCustomEvent } from '../../_util/hooks/useHandleCustomEvent';
 import { useFormItem } from '../use-form-item';
 import { FormImageUploadDefaultProps, FormImageUploadProps } from './props';
 
+interface ImageUploadRef {
+  update(value: string);
+}
+
 const FormImageUpload = (props: FormImageUploadProps) => {
   const { formData, emit } = useFormItem(props);
   const { triggerEvent } = useComponentEvent(props);
 
+  const imageUploadRef = useRef<ImageUploadRef>();
+
+  useHandleCustomEvent('handleRef', (imageUpload: ImageUploadRef) => {
+    imageUploadRef.current = imageUpload;
+  });
+
+  useEffect(() => {
+    if (imageUploadRef.current) {
+      imageUploadRef.current.update(formData.value);
+    }
+  }, [formData.value]);
+
   useHandleCustomEvent('onChange', (value) => {
     emit('onChange', value);
     triggerEvent('change', value);

diff --git a/src/ImageUpload/index.ts b/src/ImageUpload/index.ts
@@ -177,6 +177,13 @@ const ImageUpload = (props: IUploaderProps) => {
     triggerEvent('preview', file);
   });
 
+  useEvent('update', (e) => {
+    if (isControlled) {
+      return;
+    }
+    update(e);
+  });
+
   return {
     mixin: {
       value: fileList,