@cloudbase/weda-ui-mp 0.2.20

package/components/form/uploader/index.js

@@ -0,0 +1,289 @@
+import { getCloudInstance, getTempFileURL } from '../../../utils/tcb';
+import { randomStr } from '../../../utils/platform';
+import { compressImage } from './compress';
+import { isNil } from '../../../utils/lodash';
+
+Component({
+  options: {
+    virtualHost: true,
+  },
+  properties: {
+    maxUploadCount: {
+      type: Number,
+      value: 5,
+    },
+    title: {
+      type: String,
+      value: '图片上传',
+    },
+    tips: {
+      type: String,
+      value: '图片上传提示',
+    },
+    layout: {
+      type: String,
+      value: 'horizontal',
+    },
+    defaultValue: {
+      type: null,
+    },
+    single: {
+      type: Boolean,
+      value: false,
+    },
+    maxSize: {
+      type: Number,
+      value: 10,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    //是否显示标题
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    //是否获取微信头像
+    isChooseAvatar: {
+      type: Boolean,
+      value: true,
+    },
+    //图片展示形状 圆角矩形-roundedTectangle 圆形-circular 直角矩形-ectangle
+    showShape: {
+      type: String,
+      value: 'ectangle',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    isCompressBeforeUpload: {
+      type: Boolean,
+      value: false,
+    },
+    compressQuality: {
+      type: Number,
+      value: 0.7,
+    },
+
+    compressedHeight: {
+      type: Number,
+      value: 0,
+    },
+    compressedWidth: {
+      type: Number,
+      value: 0,
+    },
+    sourceType: {
+      type: String,
+      value: 'both',
+    },
+    callbacks: {
+      type: Object,
+      value: null,
+    },
+  },
+  data: {
+    maxCount: 0,
+    cloudFile: [],
+    files: [],
+    urls: [],
+    sourceTypeArray: [],
+
+    singleFlag: false,
+    layoutCls: '',
+    _layout: '',
+  },
+  lifetimes: {
+    attached() {
+      this.setData({ uploadFile: this.uploadFile.bind(this) });
+    },
+  },
+  methods: {
+    uploadFile: async function (files) {
+      try {
+        // 文件上传的函数，返回一个promise
+        const uploadPath = 'weda-uploader';
+        const callbacks = this.data.callbacks;
+        let shouldUploadToCos = true;
+        let tempFilePaths = files.tempFilePaths;
+        if (typeof callbacks?.beforeUpload === 'function') {
+          try {
+            const ret = await callbacks.beforeUpload({
+              tempFilePaths: tempFilePaths,
+              base64Uri: files.contents.map(
+                (content) =>
+                  `data:image/jpg;base64,${wx.arrayBufferToBase64(content)}`
+              ),
+            });
+            if (typeof ret === 'boolean') {
+              shouldUploadToCos = ret;
+            } else if (
+              Array.isArray(ret) &&
+              ret.every((item) => typeof item === 'string')
+            ) {
+              tempFilePaths = ret;
+            } else if (!isNil(ret)) {
+              throw new TypeError(
+                '小程序端返回值接受布尔值 / 小程序文件临时路径数组'
+              );
+            }
+          } catch (err) {
+            console.error('上传前处理函数抛错', err);
+            shouldUploadToCos = false;
+          }
+        }
+        if (shouldUploadToCos === false) {
+          return {}; // weui-uploader 不是对象
+        }
+        const tcb = await getCloudInstance();
+        const uploadPromise = tempFilePaths.map(async (tempFilePath) => {
+          const fileType = tempFilePath.split('.')[1];
+          const cloudPath = `${uploadPath}/${randomStr()}-${Date.now()}.${fileType}`;
+          let filePath = tempFilePath;
+          if (this.data.isCompressBeforeUpload) {
+            try {
+              filePath = await compressImage(filePath, {
+                isCompressBeforeUpload: this.data.isCompressBeforeUpload,
+                compressQuality: this.data.compressQuality,
+                compressedHeight: this.data.compressedHeight,
+                compressedWidth: this.data.compressedWidth,
+              });
+            } catch (err) {
+              console.error(`Compress error: ${err.message}`);
+            }
+          }
+          const uploadRes = await tcb.uploadFile({
+            cloudPath,
+            filePath,
+          });
+          return { fileID: uploadRes.fileID };
+        });
+        const uploadFileList = await Promise.all(uploadPromise);
+        const cloudUrls = uploadFileList.map((file) => file.fileID);
+        // 这里返回的东西会在uploadSuccess回调函数中获取到
+        // https://github.com/wechat-miniprogram/weui-miniprogram/blob/a3630575910302e3b94e69fcef266d2b509de650/src/components/uploader/uploader.ts#L149
+        // 写死的从返回值的 .urls 获取展示用的url来用。一定要将tempFilePaths透传下去，否则会重新加载然后出现闪白
+        return { urls: files.tempFilePaths, cloudUrls };
+      } catch (e) {
+        wx.showModal({
+          title: '上传失败，请重试',
+          content: e.message,
+          duration: 2000,
+          showCancel: false,
+        });
+        this.uploadError(e);
+      }
+    },
+    uploadError: function (e) {
+      this.triggerEvent('error', e.detail);
+    },
+    uploadSuccess: async function (e) {
+      const urls = e.detail.cloudUrls; // uploadFile 获取返回值
+      // 小程序自带tempURL 不需要调用 tcb.getTempFileURL 获取
+      this.triggerEvent('success', {
+        value: this.properties.single ? urls[0] : urls,
+      });
+      const newUrls = [...this.data.cloudFile, ...urls];
+      this.setData({
+        files: this.data.files.concat(e.detail.urls.map((url) => ({ url }))),
+        urls: newUrls,
+      });
+      this.handleChange(newUrls);
+    },
+    onDelete: function (e) {
+      let newUrls = [];
+      if (this.data.urls.length == 0) {
+        this.data.cloudFile.forEach((v, index) => {
+          if (e.detail.index != index) {
+            newUrls.push(v);
+          }
+        });
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: newUrls,
+        });
+      } else {
+        newUrls = this.data.urls.filter((v, index) => e.detail.index !== index);
+        this.setData({
+          files: this.data.files.filter((v, index) => e.detail.index !== index),
+          urls: newUrls,
+        });
+      }
+      this.handleChange(newUrls, true);
+    },
+    handleChange: function (values, isDelete = false) {
+      let value = values;
+      if (this.properties.single) {
+        value = values[0] ?? '';
+      }
+      this.triggerEvent('change', { value, isDelete });
+    },
+  },
+  observers: {
+    defaultValue: async function (value) {
+      //当单图片上传且默认值为空数组时，初次渲染更新value，以避免空串提交类型不匹配问题
+      if (Array.isArray(value) && !this.data.singleFlag) {
+        this.setData({
+          urls: value,
+        });
+        this.data.singleFlag = true;
+      }
+      if (value) {
+        let httpFiles = [];
+        const values = Array.isArray(value) ? value : [value];
+        for (let f of values) {
+          const hf = await getTempFileURL(f);
+          const httpFile = { url: hf };
+          httpFiles.push(httpFile);
+        }
+        this.setData({
+          files: httpFiles,
+          cloudFile: values,
+        });
+      } else {
+        this.setData({
+          files: [],
+          cloudFile: [],
+        });
+      }
+    },
+
+    'maxUploadCount, single': function (maxUploadCount, single) {
+      const maxCount = single ? 1 : maxUploadCount;
+      this.setData({
+        maxCount,
+      });
+    },
+    layout: function (layout) {
+      const _layout = layout !== 'vertical' ? 'horizontal' : 'vertical';
+      const layoutCls =
+        _layout === 'horizontal' ? 'weda-formcells weui-flex' : '';
+      this.setData({ _layout, layoutCls });
+    },
+    sourceType: function (sourceType) {
+      if (sourceType === 'both') {
+        this.setData({ sourceTypeArray: ['album', 'camera'] });
+      } else {
+        this.setData({ sourceTypeArray: [sourceType] });
+      }
+    },
+  },
+});

package/components/form/uploader/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "mp-uploader": "./weui-uploader",
+    "mp-cells": "weui-miniprogram/cells/cells",
+    "mp-cell": "weui-miniprogram/cell/cell",
+    "formcell": "../formcell"
+  }
+}

package/components/form/uploader/index.wxml

@@ -0,0 +1,38 @@
+<view class="weda-ui weui-cells weui-cells_form weda-formcells {{className}}" id="{{id}}" style="{{style}}">
+  <view>
+    <mp-uploader
+      max-size="{{maxSize  * 1024 * 1024}}"
+      files="{{files}}"
+      title="{{title}}"
+      labelVisible="{{labelVisible}}"
+      showDelete="{{!disabled}}"
+      ext-class="{{_layout}}"
+      bindfail="uploadError"
+      bindsuccess="uploadSuccess"
+      select="{{selectFile}}"
+      upload="{{uploadFile}}"
+      maxCount="{{maxCount}}"
+      binddelete="onDelete"
+      requiredFlag="{{requiredFlag}}"
+      disabled="{{disabled}}"
+      showShape="{{showShape}}"
+      isChooseAvatar="{{isChooseAvatar}}"
+      layout="{{_layout}}"
+      extClass="{{layoutCls}}"
+      readOnly="{{readOnly}}"
+      sourceType="{{sourceTypeArray}}"
+    >
+    </mp-uploader>
+  </view>
+</view>
+
+<!-- uploader delete 实际代码接受 showDelete
+    https://developers.weixin.qq.com/community/develop/doc/000a4e7b9cc158c110aa3961056400
+ -->
+
+<!-- bind开头的是事件handler，wxml模版中不能带 `{{}}`
+```
+<mp-uploader files="{{files}}" showDelete="{{!disabled}}" ext-class="{{layout}}" bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uploadFile}}" maxCount="{{maxUploadCount}}" title="{{title}}" binddelete="onDelete"></mp-uploader>
+```
+upload 是函数带{{}}， bindtelete直接传函数名字符串
+-->

package/components/form/uploader/index.wxss

@@ -0,0 +1,47 @@
+@import '../../../style/weda-ui.wxss';
+.weui-uploader.horizontal {
+  display: flex;
+}
+
+.weui-uploader.horizontal .weui-uploader__hd {
+  display: inline-block;
+  align-self: center;
+}
+
+.weda-uploader-pc.horizontal {
+  display: flex;
+  justify-content: space-between;
+}
+
+.weui-uploader.horizontal .weda-formcells__label {
+  width: 130px;
+}
+
+.weui-uploader__label {
+  display: flex;
+  flex: 1;
+}
+
+.weui-uploader__title {
+  flex: unset;
+}
+.weda-ui .weui-uploader.horizontal .weui-uploader__bd {
+  padding: 16px 0;
+}
+.weda-ui .weui-uploader.vertical .weui-uploader__bd {
+  padding: 16px;
+}
+.weui-uploader__hd.vertical {
+  padding-bottom: 0;
+}
+
+/* 标准化样式适配 start */
+.wd-mp-upload-image-root .weui-cells::before,
+.wd-mp-upload-image-root .weui-cells::after {
+  display: none;
+}
+
+.wd-form-item .wd-form-item-wrap .weui-uploader__hd {
+  display: none;
+}
+/* 标准化样式适配 end */

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

@@ -0,0 +1,305 @@
+import classNames from '../../../utils/classnames';
+
+Component({
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+  },
+  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,
+    },
+    requiredFlag: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    readOnly: {
+      type: Boolean,
+      value: false,
+    },
+    //是否显示标题
+    labelVisible: {
+      type: Boolean,
+      value: true,
+    },
+    //是否获取微信头像
+    isChooseAvatar: {
+      type: Boolean,
+      value: false,
+    },
+    //图片展示形状 圆角矩形-roundedTectangle 圆形-circular 直角矩形-ectangle
+    showShape: {
+      type: String,
+      value: 'ectangle',
+    },
+  },
+  data: {
+    currentFiles: [],
+    showPreview: false,
+    previewImageUrls: [],
+    shapeClass: '',
+  },
+  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,
+      });
+    },
+    onChooseAvatar(e) {
+      const that = this;
+      that.loading = true;
+      const { avatarUrl } = e.detail;
+      const mgr = wx.getFileSystemManager();
+      mgr.getFileInfo({
+        filePath: avatarUrl,
+        success(res) {
+          that.loading = false;
+          if (res?.size > that.data.maxSize) {
+            that.failEvent(1, 1);
+          } else {
+            that.commonFile([
+              {
+                tempFilePath: avatarUrl,
+                size: res?.size,
+                type: 'image',
+              },
+            ]);
+          }
+        },
+        fail(e) {
+          this.triggerEvent('fail', e, {});
+          that.loading = false;
+        },
+      });
+      this.triggerEvent('chooseAvatar', e.detail);
+    },
+    chooseImage() {
+      if (this.uploading) return;
+      wx.chooseMedia({
+        count: this.data.maxCount - this.data.files.length,
+        sizeType: this.data.sizeType,
+        sourceType: this.data.sourceType,
+        success: (res) => {
+          // 首先检查文件大小
+          let invalidIndex = -1;
+          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.failEvent(res.tempFiles.length, invalidIndex);
+            return;
+          }
+          this.commonFile(res.tempFiles);
+        },
+        fail: (fail) => {
+          if (fail.errMsg.indexOf('chooseImage:fail cancel') >= 0) {
+            this.triggerEvent('cancel', {}, {});
+            return;
+          }
+          fail.type = 2;
+          this.triggerEvent('fail', fail, {});
+        },
+      });
+    },
+    commonFile: function (tempFiles) {
+      // 获取文件内容
+      const mgr = wx.getFileSystemManager();
+      const contents = tempFiles.map((item) => {
+        const fileContent = mgr.readFileSync(item?.tempFilePath);
+
+        return fileContent;
+      });
+      const obj = {
+        tempFilePaths: tempFiles.map((item) => item.tempFilePath),
+        tempFiles: tempFiles,
+        contents,
+      };
+      // 触发选中的事件，开发者根据内容来上传文件，上传了把上传的结果反馈到files属性里面
+      this.triggerEvent('select', obj, {});
+      const files = tempFiles.map((item, i) => ({
+        loading: true,
+        url:
+          item.tempFilePaths ||
+          `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) => {
+                if (!oldFiles[len + index]) {
+                  oldFiles[len + 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;
+            tempFiles.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,
+              },
+              {}
+            );
+          });
+      }
+    },
+    failEvent() {
+      wx.showToast({
+        icon: 'none',
+        duration: 2000,
+        title: `请上传不超过 ${this.data.maxSize / (1024 * 1024)}M 的图片`,
+      });
+    },
+    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] });
+    },
+  },
+  observers: {
+    showShape: function (showShape) {
+      var shapeClass = '';
+      switch (showShape) {
+        // 圆角矩形-roundedTectangle
+        case 'roundedTectangle':
+          shapeClass = classNames({
+            ['img-shape-rounded-tectangle']: true,
+          });
+          this.setData({ shapeClass });
+          break;
+        // 圆形-circular
+        case 'circular':
+          shapeClass = classNames({
+            ['img-shape-circular']: true,
+          });
+          this.setData({ shapeClass });
+          break;
+        default:
+          shapeClass = classNames({
+            ['img-shape-ectangle']: true,
+          });
+          this.setData({ shapeClass });
+          break;
+      }
+    },
+  },
+});

package/components/form/uploader/weui-uploader.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "mp-gallery": "weui-miniprogram/gallery/gallery"
+  },
+  "styleIsolation": "shared"
+}