@cloudbase/weda-ui 2.0.8 → 2.0.11

package/src/mp/components/form/uploader/index.js

@@ -115,7 +115,7 @@ Component({
       //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
       if (Array.isArray(value) && !this.data.singleFlag) {
         this.setData({
-          urls: value
+          urls: value,
         });
         this.data.singleFlag = true;
       }

package/src/mp/components/form/uploader/index.wxml

@@ -1,29 +1,30 @@
 <view
-    class="weda-ui weui-cells weui-cells_form {{className}}"
-    id="{{id}}"
-    style="{{style}}"
+  class="weda-ui weui-cells weui-cells_form {{className}}"
+  id="{{id}}"
+  style="{{style}}"
 >
-    <mp-uploader
-        max-size="{{maxSize  * 1024 * 1024}}"
-        files="{{files}}"
-        title="{{title}}"
-        showDelete="{{true}}"
-        ext-class="{{layout}}"
-        bindfail="uploadError"
-        bindsuccess="uploadSuccess"
-        layout="{{layout}}"
-        select="{{selectFile}}"
-        upload="{{uploadFile}}"
-        maxCount="{{maxCount}}"
-        binddelete="onDelete">
-    </mp-uploader>
+  <mp-uploader
+    max-size="{{maxSize  * 1024 * 1024}}"
+    files="{{files}}"
+    title="{{title}}"
+    showDelete="{{true}}"
+    ext-class="{{layout}}"
+    bindfail="uploadError"
+    bindsuccess="uploadSuccess"
+    layout="{{layout}}"
+    select="{{selectFile}}"
+    upload="{{uploadFile}}"
+    maxCount="{{maxCount}}"
+    binddelete="onDelete"
+  >
+  </mp-uploader>
 </view>
 
 <!-- uploader delete 实际代码接受 showDelete
     https://developers.weixin.qq.com/community/develop/doc/000a4e7b9cc158c110aa3961056400
  -->
 
- <!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
+<!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
 ```
 <mp-uploader files="{{files}}" showDelete="{{true}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" binddelete="onDelete"></mp-uploader>
 ```

package/src/mp/components/form/uploader/weui-uploader.js

@@ -1,209 +1,219 @@
 Component({
-    options: {
-        addGlobalClass: true,
-        virtualHost: true
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+  },
+  properties: {
+    title: {
+      type: String,
+      value: '图片上传',
     },
-    properties: {
-        title: {
-            type: String,
-            value: '图片上传'
-        },
-        sizeType: {
-            type: Array,
-            value: ['original', 'compressed']
-        },
-        sourceType: {
-            type: Array,
-            value: ['album', 'camera']
-        },
-        maxSize: {
-            type: Number,
-            value: 5 * 1024 * 1024
-        },
-        maxCount: {
-            // 最多上传多少个文件
-            type: Number,
-            value: 1
-        },
-        files: {
-            // 当前的图片列表, {url, error, loading}
-            type: Array,
-            value: [],
-            observer(newVal) {
-                this.setData({
-                    currentFiles: newVal
-                });
-            }
-        },
-        select: {
-            // 过滤某个文件
-            type: null,
-            value: () => { }
-        },
-        upload: {
-            // 返回Promise的一个文件上传的函数
-            type: null,
-            value: null
-        },
-        tips: {
-            type: String,
-            value: ''
-        },
-        layout: {
-          type: String,
-          value: 'horizontal'
-        },
-        extClass: {
-            type: String,
-            value: ''
-        },
-        showDelete: {
-            // 是否显示delete按钮
-            type: Boolean,
-            value: true
-        }
+    sizeType: {
+      type: Array,
+      value: ['original', 'compressed'],
     },
-    data: {
-        currentFiles: [],
-        showPreview: false,
-        previewImageUrls: []
+    sourceType: {
+      type: Array,
+      value: ['album', 'camera'],
     },
-    ready() { },
-    methods: {
-        previewImage(e) {
-            const { index } = e.currentTarget.dataset;
-            const previewImageUrls = [];
-            this.data.files.forEach((item) => {
-                previewImageUrls.push(item.url);
-            });
+    maxSize: {
+      type: Number,
+      value: 5 * 1024 * 1024,
+    },
+    maxCount: {
+      // 最多上传多少个文件
+      type: Number,
+      value: 1,
+    },
+    files: {
+      // 当前的图片列表, {url, error, loading}
+      type: Array,
+      value: [],
+      observer(newVal) {
+        this.setData({
+          currentFiles: newVal,
+        });
+      },
+    },
+    select: {
+      // 过滤某个文件
+      type: null,
+      value: () => {},
+    },
+    upload: {
+      // 返回Promise的一个文件上传的函数
+      type: null,
+      value: null,
+    },
+    tips: {
+      type: String,
+      value: '',
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    extClass: {
+      type: String,
+      value: '',
+    },
+    showDelete: {
+      // 是否显示delete按钮
+      type: Boolean,
+      value: true,
+    },
+  },
+  data: {
+    currentFiles: [],
+    showPreview: false,
+    previewImageUrls: [],
+  },
+  ready() {},
+  methods: {
+    previewImage(e) {
+      const { index } = e.currentTarget.dataset;
+      const previewImageUrls = [];
+      this.data.files.forEach((item) => {
+        previewImageUrls.push(item.url);
+      });
+      this.setData({
+        previewImageUrls,
+        previewCurrent: index,
+        showPreview: true,
+      });
+    },
+    chooseImage() {
+      if (this.uploading) return;
+      wx.chooseImage({
+        count: this.data.maxCount - this.data.files.length,
+        sizeType: this.data.sizeType,
+        sourceType: this.data.sourceType,
+        success: (res) => {
+          // console.log('chooseImage resp', res)
+          // 首先检查文件大小
+          let invalidIndex = -1;
+          // @ts-ignore
+          res.tempFiles.forEach((item, index) => {
+            if (item.size > this.data.maxSize) {
+              invalidIndex = index;
+            }
+          });
+          if (typeof this.data.select === 'function') {
+            const ret = this.data.select(res);
+            if (ret === false) {
+              return;
+            }
+          }
+          if (invalidIndex >= 0) {
+            this.triggerEvent(
+              'fail',
+              {
+                type: 1,
+                errMsg: `chooseImage:fail size exceed ${this.data.maxSize}`,
+                total: res.tempFilePaths.length,
+                index: invalidIndex,
+              },
+              {}
+            );
+            return;
+          }
+          // 获取文件内容
+          const mgr = wx.getFileSystemManager();
+          const contents = res.tempFilePaths.map((item) => {
+            // @ts-ignore
+            const fileContent = mgr.readFileSync(item);
+            return fileContent;
+          });
+          const obj = {
+            tempFilePaths: res.tempFilePaths,
+            tempFiles: res.tempFiles,
+            contents,
+          };
+          // 触发选中的事件，开发者根据内容来上传文件，上传了把上传的结果反馈到files属性里面
+          this.triggerEvent('select', obj, {});
+          const files = res.tempFilePaths.map((item, i) => ({
+            loading: true,
+            url:
+              res.tempFilePaths[i] ||
+              `data:image/jpg;base64,${wx.arrayBufferToBase64(contents[i])}`,
+          }));
+          if (!files || !files.length) return;
+          if (typeof this.data.upload === 'function') {
+            const len = this.data.files.length;
+            const newFiles = this.data.files.concat(files);
             this.setData({
-                previewImageUrls,
-                previewCurrent: index,
-                showPreview: true
+              files: newFiles,
+              currentFiles: newFiles,
             });
-        },
-        chooseImage() {
-            if (this.uploading)
-                return;
-            wx.chooseImage({
-                count: this.data.maxCount - this.data.files.length,
-                sizeType: this.data.sizeType,
-                sourceType: this.data.sourceType,
-                success: (res) => {
-                    // console.log('chooseImage resp', res)
-                    // 首先检查文件大小
-                    let invalidIndex = -1;
-                    // @ts-ignore
-                    res.tempFiles.forEach((item, index) => {
-                        if (item.size > this.data.maxSize) {
-                            invalidIndex = index;
-                        }
-                    });
-                    if (typeof this.data.select === 'function') {
-                        const ret = this.data.select(res);
-                        if (ret === false) {
-                            return;
-                        }
-                    }
-                    if (invalidIndex >= 0) {
-                        this.triggerEvent('fail', {
-                            type: 1,
-                            errMsg: `chooseImage:fail size exceed ${this.data.maxSize}`,
-                            total: res.tempFilePaths.length,
-                            index: invalidIndex
-                        }, {});
-                        return;
-                    }
-                    // 获取文件内容
-                    const mgr = wx.getFileSystemManager();
-                    const contents = res.tempFilePaths.map((item) => {
-                        // @ts-ignore
-                        const fileContent = mgr.readFileSync(item);
-                        return fileContent;
-                    });
-                    const obj = {
-                        tempFilePaths: res.tempFilePaths,
-                        tempFiles: res.tempFiles,
-                        contents
-                    };
-                    // 触发选中的事件，开发者根据内容来上传文件，上传了把上传的结果反馈到files属性里面
-                    this.triggerEvent('select', obj, {});
-                    const files = res.tempFilePaths.map((item, i) => ({
-                        loading: true,
-                        url: res.tempFilePaths[i] ||
-                            `data:image/jpg;base64,${wx.arrayBufferToBase64(contents[i])}`
-                    }));
-                    if (!files || !files.length)
-                        return;
-                    if (typeof this.data.upload === 'function') {
-                        const len = this.data.files.length;
-                        const newFiles = this.data.files.concat(files);
-                        this.setData({
-                            files: newFiles,
-                            currentFiles: newFiles
-                        });
-                        this.loading = true;
-                        this.data
-                            .upload(obj)
-                            .then((json) => {
-                            this.loading = false;
-                            if (json.urls) {
-                                const oldFiles = this.data.files;
-                                json.urls.forEach((url, index) => {
-                                    oldFiles[len + index].url = url;
-                                    oldFiles[len + index].loading = false;
-                                });
-                                this.setData({
-                                    files: oldFiles,
-                                    currentFiles: newFiles
-                                });
-                                this.triggerEvent('success', json, {});
-                            }
-                            else {
-                                this.triggerEvent('fail', {
-                                    type: 3,
-                                    errMsg: 'upload file fail, urls not found'
-                                }, {});
-                            }
-                        })
-                            .catch((err) => {
-                            this.loading = false;
-                            const oldFiles = this.data.files;
-                            res.tempFilePaths.forEach((item, index) => {
-                                oldFiles[len + index].error = true;
-                                oldFiles[len + index].loading = false;
-                            });
-                            this.setData({
-                                files: oldFiles,
-                                currentFiles: newFiles
-                            });
-                            this.triggerEvent('fail', {
-                                type: 3,
-                                errMsg: 'upload file fail',
-                                error: err
-                            }, {});
-                        });
-                    }
-                },
-                fail: (fail) => {
-                    if (fail.errMsg.indexOf('chooseImage:fail cancel') >= 0) {
-                        this.triggerEvent('cancel', {}, {});
-                        return;
-                    }
-                    fail.type = 2;
-                    this.triggerEvent('fail', fail, {});
+            this.loading = true;
+            this.data
+              .upload(obj)
+              .then((json) => {
+                this.loading = false;
+                if (json.urls) {
+                  const oldFiles = this.data.files;
+                  json.urls.forEach((url, index) => {
+                    oldFiles[len + index].url = url;
+                    oldFiles[len + index].loading = false;
+                  });
+                  this.setData({
+                    files: oldFiles,
+                    currentFiles: newFiles,
+                  });
+                  this.triggerEvent('success', json, {});
+                } else {
+                  this.triggerEvent(
+                    'fail',
+                    {
+                      type: 3,
+                      errMsg: 'upload file fail, urls not found',
+                    },
+                    {}
+                  );
                 }
-            });
+              })
+              .catch((err) => {
+                this.loading = false;
+                const oldFiles = this.data.files;
+                res.tempFilePaths.forEach((item, index) => {
+                  oldFiles[len + index].error = true;
+                  oldFiles[len + index].loading = false;
+                });
+                this.setData({
+                  files: oldFiles,
+                  currentFiles: newFiles,
+                });
+                this.triggerEvent(
+                  'fail',
+                  {
+                    type: 3,
+                    errMsg: 'upload file fail',
+                    error: err,
+                  },
+                  {}
+                );
+              });
+          }
         },
-        deletePic(e) {
-            const index = e.detail.index;
-            const files = this.data.files;
-            const file = files.splice(index, 1);
-            this.setData({
-                files,
-                currentFiles: files
-            });
-            this.triggerEvent('delete', { index, item: file[0] });
-        }
-    }
+        fail: (fail) => {
+          if (fail.errMsg.indexOf('chooseImage:fail cancel') >= 0) {
+            this.triggerEvent('cancel', {}, {});
+            return;
+          }
+          fail.type = 2;
+          this.triggerEvent('fail', fail, {});
+        },
+      });
+    },
+    deletePic(e) {
+      const index = e.detail.index;
+      const files = this.data.files;
+      const file = files.splice(index, 1);
+      this.setData({
+        files,
+        currentFiles: files,
+      });
+      this.triggerEvent('delete', { index, item: file[0] });
+    },
+  },
 });

package/src/mp/components/form/uploader/weui-uploader.wxml

@@ -1,45 +1,88 @@
 <view class="weui-uploader {{extClass}}">
-    <view class="weui-uploader__hd {{layout}}">
-        <view class="weda-formcells__label weui-cell">
-            <block wx:if="{{layout === 'horizontal'}}">
-                <view class="">
-                    <view class="weui-uploader__title">{{title}}</view>
-                    <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
-                </view>
-                <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
-            </block>
-            <block wx:if="{{layout === 'vertical'}}">
-                <view class="weui-uploader__label">
-                    <view class="weui-uploader__title">{{title}}</view>
-                    <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
-                </view>
-                <view class="weui-uploader__info" wx:if="{{maxCount > 1}}">{{currentFiles.length}}/{{maxCount}}</view>
-            </block>
+  <view class="weui-uploader__hd {{layout}}">
+    <view class="weda-formcells__label weui-cell">
+      <block wx:if="{{layout === 'horizontal'}}">
+        <view class="">
+          <view class="weui-uploader__title">{{title}}</view>
+          <view class="weui-uploader__info" wx:if="{{maxCount > 1}}"
+            >{{currentFiles.length}}/{{maxCount}}</view
+          >
         </view>
+        <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+      </block>
+      <block wx:if="{{layout === 'vertical'}}">
+        <view class="weui-uploader__label">
+          <view class="weui-uploader__title">{{title}}</view>
+          <label wx:if="{{true}}" class="weda-formcells__flag">*</label>
+        </view>
+        <view class="weui-uploader__info" wx:if="{{maxCount > 1}}"
+          >{{currentFiles.length}}/{{maxCount}}</view
+        >
+      </block>
     </view>
-    <view class="weui-uploader__bd">
-        <view class="weui-uploader__files">
-            <block wx:for="{{currentFiles}}" wx:key="*this">
-                <view wx:if="{{item.error}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
-                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
-                    <view class="weui-uploader__file-content">
-                        <icon type="warn" size="23" color="#F43530"></icon>
-                    </view>
-                </view>
-                <view wx:elif="{{item.loading}}" data-index="{{index}}" bindtap="previewImage" class="weui-uploader__file weui-uploader__file_status">
-                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
-                    <view class="weui-uploader__file-content">
-                        <view class="weui-loading"></view>
-                    </view>
-                </view>
-                <view wx:else class="weui-uploader__file" data-index="{{index}}" bindtap="previewImage">
-                    <image class="weui-uploader__img" src="{{item.url}}" mode="aspectFill" />
-                </view>
-            </block>
+  </view>
+  <view class="weui-uploader__bd">
+    <view class="weui-uploader__files">
+      <block wx:for="{{currentFiles}}" wx:key="*this">
+        <view
+          wx:if="{{item.error}}"
+          data-index="{{index}}"
+          bindtap="previewImage"
+          class="weui-uploader__file weui-uploader__file_status"
+        >
+          <image
+            class="weui-uploader__img"
+            src="{{item.url}}"
+            mode="aspectFill"
+          />
+          <view class="weui-uploader__file-content">
+            <icon type="warn" size="23" color="#F43530"></icon>
+          </view>
+        </view>
+        <view
+          wx:elif="{{item.loading}}"
+          data-index="{{index}}"
+          bindtap="previewImage"
+          class="weui-uploader__file weui-uploader__file_status"
+        >
+          <image
+            class="weui-uploader__img"
+            src="{{item.url}}"
+            mode="aspectFill"
+          />
+          <view class="weui-uploader__file-content">
+            <view class="weui-loading"></view>
+          </view>
         </view>
-        <view wx:if="{{currentFiles.length < maxCount}}" class="weui-uploader__input-box" hover-class="weui-active">
-            <view class="weui-uploader__input" bindtap="chooseImage"></view>
+        <view
+          wx:else
+          class="weui-uploader__file"
+          data-index="{{index}}"
+          bindtap="previewImage"
+        >
+          <image
+            class="weui-uploader__img"
+            src="{{item.url}}"
+            mode="aspectFill"
+          />
         </view>
+      </block>
+    </view>
+    <view
+      wx:if="{{currentFiles.length < maxCount}}"
+      class="weui-uploader__input-box"
+      hover-class="weui-active"
+    >
+      <view class="weui-uploader__input" bindtap="chooseImage"></view>
     </view>
-    <mp-gallery class="gallery" hide-on-click="{{true}}" show-delete="{{showDelete}}" show="{{showPreview}}" binddelete="deletePic" img-urls="{{previewImageUrls}}" current="{{previewCurrent}}"></mp-gallery>
+  </view>
+  <mp-gallery
+    class="gallery"
+    hide-on-click="{{true}}"
+    show-delete="{{showDelete}}"
+    show="{{showPreview}}"
+    binddelete="deletePic"
+    img-urls="{{previewImageUrls}}"
+    current="{{previewCurrent}}"
+  ></mp-gallery>
 </view>

package/src/mp/components/form/uploaderFile/index.js

@@ -60,7 +60,7 @@ Component({
     urls: [],
     cloudFile: [],
     strogeUrls: [],
-    singleFlag: false
+    singleFlag: false,
   },
   methods: {
     // 批量上传文件前置事件
@@ -134,8 +134,9 @@ Component({
       if (!this.handleBefore(files?.tempFiles)) return;
       const uploadPath = 'weda-uploader';
       const uploadPromise = files.tempFiles.map(async (tempFile) => {
-        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${tempFile.name
-          }`;
+        const cloudPath = `${uploadPath}/${uuid().replaceAll('-', '')}-${
+          tempFile.name
+        }`;
         tempFile.percent = '0';
         tempFile.cloudPath = null;
         tempFile.filePath = tempFile?.path || null;
@@ -260,7 +261,7 @@ Component({
       //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
       if (Array.isArray(value) && !this.data.singleFlag) {
         this.setData({
-          urls: value
+          urls: value,
         });
         this.data.singleFlag = true;
       }