feat: 更新 image upload 组件的 axml

.gitignore

@@ -37,3 +37,4 @@ project.private.config.json
 compiled/wechat/miniprogram_npm
 compiled/wechat/node_modules
 compiled/wechat/yarn.lock
+knowledge.json

compiled/alipay/demo/pages/ImageUpload/index.axml

@@ -3,33 +3,29 @@
     onChange="onChange"
     onUpload="onUpload" />
 </container>
-
 <container title="初始值">
   <uploader
-    defaultFileList="{{defaultFileList}}"
+    defaultFileList="{{ defaultFileList }}"
     onChange="onChange"
     onUpload="onUpload" />
 </container>
-
 <container title="上传最大限制">
   限制只能上传1个
   <uploader
-    maxCount="{{1}}"
+    maxCount="{{ 1 }}"
     onChange="onChange"
     onUpload="onUpload" />
 </container>
-
 <container title="自定义移除">
   <uploader
-    defaultFileList="{{defaultFileList}}"
+    defaultFileList="{{ defaultFileList }}"
     onRemove="onRemove"
     onChange="onChange"
     onUpload="onUpload" />
 </container>
-
 <container title="自定义上传前">
   <uploader
-    defaultFileList="{{defaultFileList}}"
+    defaultFileList="{{ defaultFileList }}"
     onBeforeUpload="onBeforeUpload"
     onChange="onChange"
     onUpload="onUpload" />

compiled/alipay/demo/pages/ImageUpload/index.js

@@ -1,45 +1,45 @@
 Page({
-  data: {
-    defaultFileList: [{
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ',
-      status: 'done',
-    }, {
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ',
-      status: 'done',
-    }, {
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ',
-      status: 'done', 
-    }],
-  },
-  onChange(fileList) {
-    // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理
-    console.log('图片列表：', fileList);
-  },
-  onUpload(file) {
-    return new Promise((resolve) => {
-      console.log('上传的图片为：', file);
-      setTimeout(() => {
-        resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
-      }, 2000);
-    })
-  },
-  onRemove(file) {
-    return new Promise((resolve) => {
-      console.log('即将移除的图片为：', file);
-      my.confirm({
-        title: '是否确认移除图片',
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        success: (e) => {
-          resolve(e.confirm);
-        }
-      });
-    })
-  },
-  onBeforeUpload(localFileList) {
-    console.log('即将上传的图片列表为：', localFileList);
-    localFileList = localFileList.filter(item => item.size < 10000);
-    console.log('修改上传的图片列表为：', localFileList);
-    return localFileList;
-  }
+    data: {
+        defaultFileList: [{
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ',
+                status: 'done',
+            }, {
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ',
+                status: 'done',
+            }, {
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ',
+                status: 'done',
+            }],
+    },
+    onChange: function (fileList) {
+        // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理
+        console.log('图片列表：', fileList);
+    },
+    onUpload: function (file) {
+        return new Promise(function (resolve) {
+            console.log('上传的图片为：', file);
+            setTimeout(function () {
+                resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
+            }, 2000);
+        });
+    },
+    onRemove: function (file) {
+        return new Promise(function (resolve) {
+            console.log('即将移除的图片为：', file);
+            my.confirm({
+                title: '是否确认移除图片',
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                success: function (e) {
+                    resolve(e.confirm);
+                }
+            });
+        });
+    },
+    onBeforeUpload: function (localFileList) {
+        console.log('即将上传的图片列表为：', localFileList);
+        localFileList = localFileList.filter(function (item) { return item.size < 10000; });
+        console.log('修改上传的图片列表为：', localFileList);
+        return localFileList;
+    }
 });

compiled/alipay/demo/pages/ImageUploadControl/index.axml

@@ -1,20 +1,19 @@
 <container title="受控模式">
   <uploader
-    fileList="{{fileList}}"
+    fileList="{{ fileList }}"
     onChange="onChange"
     onUpload="onUpload" />
 </container>
-
 <container title="手动触发上传">
   <uploader
     ref="handleUploaderRef"
-    fileList="{{fileList}}"
+    fileList="{{ fileList }}"
     onChange="onChange"
     onUpload="onUpload" />
-  <button
-    size="default"
+  <ant-button
+    size="medium"
     onTap="upload"
     type="primary">
     上传
-  </button>
+  </ant-button>
 </container>

compiled/alipay/demo/pages/ImageUploadControl/index.js

@@ -1,33 +1,33 @@
 Page({
-  data: {
-    fileList: [{
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ',
-      status: 'done',
-    }, {
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ',
-      status: 'pending',
-    }, {
-      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ',
-      status: 'error', 
-    }],
-  },
-  onChange(fileList) {
-    this.setData({
-      fileList,
-    });
-  },
-  handleUploaderRef(ref){
-    this.handleUploaderRef = ref;
-  },
-  upload(){
-    this.handleUploaderRef.chooseImage()
-  },
-  onUpload(file) {
-    console.log('当前上传的图片为：', file);
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
-      }, 2000);
-    })
-  },
+    data: {
+        fileList: [{
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ',
+                status: 'done',
+            }, {
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ',
+                status: 'pending',
+            }, {
+                url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ',
+                status: 'error',
+            }],
+    },
+    onChange: function (fileList) {
+        this.setData({
+            fileList: fileList,
+        });
+    },
+    handleUploaderRef: function (ref) {
+        this.handleUploaderRef = ref;
+    },
+    upload: function () {
+        this.handleUploaderRef.chooseImage();
+    },
+    onUpload: function (file) {
+        console.log('当前上传的图片为：', file);
+        return new Promise(function (resolve) {
+            setTimeout(function () {
+                resolve('https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ');
+            }, 2000);
+        });
+    },
 });

compiled/alipay/demo/pages/ImageUploadControl/index.json

@@ -2,6 +2,7 @@
   "defaultTitle": "ImageUpload",
   "usingComponents": {
     "uploader": "../../../src/ImageUpload/index",
+    "ant-button": "../../../src/Button/index",
     "container": "../../../src/Container/index"
   }
-}
+}

compiled/alipay/src/ImageUpload/index.axml

@@ -1,52 +1,55 @@
 <view
-  class="ant-image-upload {{className || ''}}"
-  style="{{style || ''}}">
-  <slot fileList="{{mixin.value}}">
-    <view
-      a:for="{{mixin.value}}"
-      class="ant-image-upload-show"
-      a:key="uid">
-      <view
-        data-uid="{{item.uid}}"
-        onTap="onRemove">
-        <slot name="removeButton">
-          <view class="ant-image-upload-close" />
-        </slot>
-      </view>
-      <slot
-        name="image"
-        value="{{item}}">
+  class="ant-image-upload {{ className || '' }}"
+  style="{{ style || '' }}">
+  <slot fileList="{{ mixin.value }}">
+    <block
+      a:for="{{ mixin.value }}"
+      a:for-index="index"
+      a:for-item="item"
+      a:key="{{ item.uid }}">
+      <view class="ant-image-upload-show">
         <view
-          class="ant-image-upload-cover"
-          a:if="{{item.status === 'uploading' || item.status === 'error'}}">
-          <view
-            a:if="{{item.status === 'uploading'}}"
-            class="ant-image-upload-cover-loading">
-            <loading class="ant-image-upload-cover-loading-icon" />
-            <view class="ant-image-upload-cover-loading-text">上传中...</view>
-          </view>
+          data-uid="{{ item.uid }}"
+          onTap="onRemove">
+          <slot name="removeButton">
+            <view class="ant-image-upload-close" />
+          </slot>
+        </view>
+        <slot
+          name="image"
+          value="{{ item }}">
           <view
-            a:if="{{item.status === 'error'}}"
-            class="ant-image-upload-cover-error">
-            <icon
-              class="ant-image-upload-cover-error-icon"
-              type="CloseCircleOutline" />
-            <view class="ant-image-upload-cover-error-text">上传失败</view>
+            a:if="{{ item.status === 'uploading' || item.status === 'error' }}"
+            class="ant-image-upload-cover">
+            <view
+              a:if="{{ item.status === 'uploading' }}"
+              class="ant-image-upload-cover-loading">
+              <loading className="ant-image-upload-cover-loading-icon" />
+              <view class="ant-image-upload-cover-loading-text">上传中...</view>
+            </view>
+            <view
+              a:if="{{ item.status === 'error' }}"
+              class="ant-image-upload-cover-error">
+              <icon
+                className="ant-image-upload-cover-error-icon"
+                type="CloseCircleOutline" />
+              <view class="ant-image-upload-cover-error-text">上传失败</view>
+            </view>
           </view>
-        </view>
-        <image
-          class="ant-image-upload-image"
-          mode="{{imageMode}}"
-          src="{{item.url || item.path}}"
-          data-uid="{{item.uid}}"
-          onTap="onPreview" />
-      </slot>
-    </view>
 
+          <image
+            class="ant-image-upload-image"
+            mode="{{ imageMode }}"
+            src="{{ item.url || item.path }}"
+            data-uid="{{ item.uid }}"
+            onTap="onPreview" />
+        </slot>
+      </view>
+    </block>
     <view onTap="chooseImage">
       <slot name="uploadButton">
         <view
-          a:if="{{typeof maxCount === 'undefined' || mixin.value.length < maxCount}}"
+          a:if="{{ !maxCount || mixin.value.length < maxCount }}"
           class="ant-image-upload-add-image-wrapper">
           <icon
             type="AddOutline"

compiled/alipay/src/tsxml/type.ts

@@ -42,4 +42,5 @@ export interface Props {
   hidden?: any;
   enableNative?: any;
   disabled?: boolean;
+  fileList?: any;
 }