Feat/upload (#114)

* feat(image-upload): add image-upload component * fix(minidev): update minidev version to resolve preview problem * fix(image-upload): add preview default value for image-upload * feat(image-upload): add css variable and change class name * fix(demo): remove useless formValidate page * feat(video-upload): add videoUpload compoents * feat(file-upload): add fileUpload compoents * feat(file-upload): add toast lock to avoid fastclick * feat(file-upload): add css variable * feat(file-upload): add onPreviewFail callback * feat(upload): add markdown * feat(file-upload): add maxCount props * feat(uploader): fix lint * feat(video-upload): add maxCount props * feat(video-upload): markdown add maxCount props * feat(uploader): add promisify declare namespace * feat(doc): update appCdnBaseUrl * feat(image-upload): failed state style changes and commit success logic adjustments * fix(Icon): fix color style used in plugin (#93) Co-authored-by: wyj <wb-wyj631405@antfin.com> * fix(vTabs): fix click bottom tap jump to the tap before (#95) * fix(vTabs): fix click bottom tap jump to the tap before * fix(VTabs): fix active style of the before tab border Co-authored-by: 彧衡 <yuheng.lh@antgroup.com> * fix(CheckboxGroup): remove default value prop (#96) Co-authored-by: wyj <wb-wyj631405@antfin.com> * chore(Picker): this.dataList sync with props.data (#94) Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> * feat(doc): use google analytics (#100) Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> * feat(Tips): 单行文本时关闭按钮垂直居中 (#98) * feat(Tips): 单行文本时关闭按钮垂直居中 * feat(Tips): getTextType避免重复触发didUpdate Co-authored-by: wyj <wb-wyj631405@antfin.com> * fix(checkbox-group): onchange does not trigger (#103) * fix(checkbox-group): checkboxItem dynamic rendering onchange does not trigger * fix(checkbox-group): checkboxItem dynamic rendering onchange does not trigger * fix(checkbox-group): adjust md Co-authored-by: 彧衡 <yuheng.lh@antgroup.com> * chore(dumi): fix conflict babal.config.js (#109) Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> * Chore/picker (#108) * chore(Picker): this.dataList sync with props.data * chore(Picker): refactor picker Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> * Chore/switch (#110) * chore(Switch): refactor Switch * chore(Switch): restore compiles.js Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> * Chore/tab (#111) * chore(Tab): update margin to padding * chore(Tab): restore tab.less Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> Co-authored-by: 彧衡 <yuheng.lh@antgroup.com> Co-authored-by: 陌缓 <dongqing.mdq@alibaba-inc.com> Co-authored-by: wyj580231 <30888500+wyj580231@users.noreply.github.com> Co-authored-by: wyj <wb-wyj631405@antfin.com> Co-authored-by: miaodongqing <dongqing_miao@163.com>
ant-design · May 26, 2022 · f1c5f0f · f1c5f0f
1 parent b200561
commit f1c5f0f
Show file tree

Hide file tree

Showing 73 changed files with 2,922 additions and 480 deletions.
diff --git a/babel.config.js b/babel.config.js
diff --git a/demo/app.json b/demo/app.json
@@ -49,6 +49,9 @@
     "pages/SafeArea/index",
     "pages/Dialog/index",
     "pages/Container/index",
+    "pages/ImageUpload/index",
+    "pages/VideoUpload/index",
+    "pages/FileUpload/index",
     "pages/Checklist/index",
     "pages/Empty/index",
     "pages/Slider/index",

diff --git a/demo/pages/FileUpload/index.acss b/demo/pages/FileUpload/index.acss
@@ -0,0 +1,9 @@
+.demo-file-upload {
+  padding-bottom: 80rpx;
+}
+
+.demo-file-upload-title {
+  font-size: 28rpx;
+  padding: 16rpx;
+  height: 32rpx;
+}
diff --git a/demo/pages/FileUpload/index.axml b/demo/pages/FileUpload/index.axml
@@ -0,0 +1,57 @@
+<view class="demo-file-upload">
+  <view class="demo-file-upload-title">基本用法</view>
+  <view class="demo-file-upload-show">
+    <file-upload 
+      action="{{action}}"
+      defaultValue="{{value_1}}"
+      maxCount="{{2}}"
+      onChange="onChange"
+    />
+  </view>
+  <view class="demo-file-upload-title">上传状态</view>
+  <view class="demo-file-upload-show">
+    <file-upload 
+      action="{{action}}"
+      defaultValue="{{value_2}}"
+      onPreviewFail="onPreviewFail"
+      maxCount="{{6}}"
+    />
+  </view>
+  <view class="demo-file-upload-title">自定义上传入口</view>
+  <view class="demo-file-upload-show">
+    <file-upload 
+      action="{{action}}"
+      defaultValue="{{value_1}}"
+      maxCount="{{3}}"
+    >
+      <view slot="uploadButton">
+        <am-icon type="AddCircleOutline" color="#999" size="small"/>
+      </view>
+    </file-upload>
+  </view>
+  <view class="demo-file-upload-title">删除文件确认</view>
+  <view class="demo-file-upload-show">
+    <file-upload
+      action='{{action}}'
+      defaultValue="{{value_1}}"
+      maxCount="{{1}}"
+      onDelete="onDelete"
+    />
+  </view>
+  <view class="demo-file-upload-title">限制上传文件大小和类型</view>
+  <view class="demo-file-upload-show">
+    <file-upload 
+      action='{{action}}'
+      maxCount="{{1}}"
+      onBeforeUpload="onBeforeUpload"
+    />
+  </view>
+
+  <view class="demo-file-upload-title">自定义上传方法</view>
+  <view class="demo-file-upload-show">
+    <file-upload  
+      maxCount="{{1}}"
+      onUpload="onUpload"
+    />
+  </view>
+</view>
diff --git a/demo/pages/FileUpload/index.js b/demo/pages/FileUpload/index.js
@@ -0,0 +1,77 @@
+Page({
+  data: {
+    action: 'https://www.fastmock.site/mock/b3a1128da69d22edd307be51154c913d/upload/file',
+    value_1: [{
+      key: '111',
+      url: 'https://gw.alipayobjects.com/os/bmw-prod/e9f1b9ec-e0a3-46ed-b8e0-7f0ab2e95228.pdf', //网络资源
+      description: 'XXXXXX资料.pdf',
+      status: 'done',
+      size: '100.9KB'
+    }],
+    value_2: [{
+      key: '111',
+      url: 'https://resource/xxx.pdf', // 这种是本地暂存文件路径
+      description: 'XXXXXX资料.pdf',
+      status: 'done',
+      size: '100.9KB'
+    }, {
+      key: '111',
+      url: 'https://resource/xxx.zip',
+      description: 'XXXXXX资料.zip',
+      status: 'pending',
+      size: '100.9KB',
+      progress: 50
+    }, {
+      key: '111',
+      url: 'https://resource/xxx.doc',
+      description: 'XXXXXX资料.doc',
+      status: 'error',
+      size: '100.9KB'
+    }]
+  },
+  onChange(v) {
+    console.log('当前已上传的文件列表：', v);
+  },
+  onDelete(v) {
+    console.log('即将删除的文件为：', v);
+    return new Promise((resolve) => {
+      my.confirm({
+        title: '是否确认删除文件',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        success: (e) => {
+          resolve(e.confirm);
+        }
+      });
+    })
+  },
+  onPreviewFail(v) {
+    console.log('不支持预览该格式的文件地址为：', v);
+  },
+  onBeforeUpload(file, fileList) {
+    console.log('当前上传的文件和已上传的文件分别是：', file, fileList);
+    return new Promise((resolve) => {
+      const { size } = file;
+      if (size / 1024 / 1024 > 5) {
+        my.showToast({
+          content: '上传文件不超过5M！'
+        })
+        resolve(false);
+      } else {
+        resolve(true);
+      }
+    })
+  },
+  onUpload(file) {
+    console.log('当前上传的文件为：', file);
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          ...file,
+          status: 'done', // 或者 'error',
+          url: 'https://gw.alipayobjects.com/os/bmw-prod/e9f1b9ec-e0a3-46ed-b8e0-7f0ab2e95228.pdf', //error为''
+        })
+      }, 3000)
+    })
+  }
+});
diff --git a/demo/pages/FileUpload/index.json b/demo/pages/FileUpload/index.json
@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "FileUpload",
+  "usingComponents": {
+    "file-upload": "../../../src/FileUpload/index",
+    "am-icon": "../../../src/Icon/index"
+  }
+}
diff --git a/demo/pages/ImageUpload/index.acss b/demo/pages/ImageUpload/index.acss
@@ -0,0 +1,10 @@
+.demo-image-upload-show {
+  padding: 8rpx;
+  background-color: #fff;
+}
+
+.demo-image-upload-title {
+  font-size: 28rpx;
+  padding: 16rpx;
+  height: 32rpx;
+}
diff --git a/demo/pages/ImageUpload/index.axml b/demo/pages/ImageUpload/index.axml
@@ -0,0 +1,79 @@
+<view class="demo-image-upload">
+  <view class="demo-image-upload-title">基本用法</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{1}}"
+      value="{{value_1}}"
+      onChange="onChange"
+    />
+  </view>
+
+  <view class="demo-image-upload-title">上传状态</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{8}}"
+      value="{{value_2}}"
+      onChange="onChange"
+    />
+  </view>
+  <view class="demo-image-upload-title">带示例图片</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{2}}"
+      demoImage="{{demoImage}}"
+      onChange="onChange"
+    />
+  </view>
+  <view class="demo-image-upload-title">自定义上传图标</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{3}}"
+      onChange="onChange"
+    >
+      <view slot="uploadIcon">
+        <am-icon type="CameraOutline" color="#999" size="small"/>
+      </view>
+    </uploader>
+  </view>
+  <view class="demo-image-upload-title">自定义容器大小</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{2}}"
+      width="168"
+      height="120"
+      onChange="onChange"
+    />
+  </view>
+  <view class="demo-image-upload-title">删除图片确认</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{2}}"
+      value="{{value_1}}"
+      onDelete="onDelete"
+    />
+  </view>
+  <view class="demo-image-upload-title">限制上传图片大小和类型</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      action='{{action}}'
+      maxCount="{{2}}"
+      value="{{value_1}}"
+      onBeforeUpload="onBeforeUpload"
+    />
+  </view>
+  <view class="demo-image-upload-title">自定义上传方法</view>
+  <view class="demo-image-upload-show">
+    <uploader 
+      maxCount="{{2}}"
+      value="{{value_1}}"
+      onUpload="onUpload"
+      onChange="onChange"
+    />
+  </view>
+</view>
diff --git a/demo/pages/ImageUpload/index.js b/demo/pages/ImageUpload/index.js
@@ -0,0 +1,83 @@
+Page({
+  data: {
+    action: 'https://www.fastmock.site/mock/b3a1128da69d22edd307be51154c913d/upload/image',
+    value_1: [{
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+      status: 'done'
+    }],
+    value_2: [{
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+      status: 'done'
+    }, {
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+      status: 'pending'
+    }, {
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+      status: 'error'
+    }],
+    value_3: [{
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*znK_ToIL8rQAAAAAAAAAAAAAARQnAQ',
+      status: 'done',
+      description: '标签1'
+    }, {
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*kStORbDQxwMAAAAAAAAAAAAAARQnAQ',
+      status: 'done',
+      description: '标签2'
+    }, {
+      key: '111',
+      url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*K4Z-RLHuliYAAAAAAAAAAAAAARQnAQ',
+      status: 'done',
+      description: '标签3'
+    }],
+    demoImage: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*8cMtRYFpz88AAAAAAAAAAAAAARQnAQ'
+  },
+  onChange(v) {
+    // 这里的数据包括上传失败和成功的图片列表，如果需要筛选出上传成功的图片需要在此处理
+    console.log('当前已上传的图片列表：', v);
+  },
+  onDelete(v) {
+    console.log('即将删除的图片为：', v);
+    return new Promise((resolve) => {
+      my.confirm({
+        title: '是否确认删除图片',
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        success: (e) => {
+          resolve(e.confirm);
+        }
+      });
+    })
+  },
+  onBeforeUpload(file, fileList) {
+    console.log('当前上传的文件和已上传的文件分别是：', file, fileList);
+    return new Promise((resolve) => {
+      const { size } = file;
+      if (size / 1024 / 1024 > 5) {
+        my.showToast({
+          content: '上传图片不超过5M！'
+        })
+        resolve(false);
+      } else {
+        resolve(true);
+      }
+    })
+  },
+  onUpload(file) {
+    console.log('当前上传的图片为：', file);
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          ...file,
+          status: 'done', // 或者 'error'
+          url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ', // 'error'时应为''
+        });
+      }, 3000)
+    })
+  }
+})
diff --git a/demo/pages/ImageUpload/index.json b/demo/pages/ImageUpload/index.json
@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "ImageUpload",
+  "usingComponents": {
+    "uploader": "../../../src/ImageUpload/index",
+    "am-icon": "../../../src/Icon/index"
+  }
+}
diff --git a/demo/pages/Picker/index.acss b/demo/pages/Picker/index.acss
@@ -1,7 +1,3 @@
-page {
-  background-color: #e6e6e6;
-}
-
 .pickerTips {
   padding: 24rpx;
 }