diff --git a/example/app.json b/example/app.json
index 1c7b9af5..5a772982 100644
--- a/example/app.json
+++ b/example/app.json
@@ -133,6 +133,7 @@
"van-swipe-cell": "./dist/swipe-cell/index",
"van-swipe-cell-demo": "./dist/swipe-cell/demo/index",
"van-uploader": "./dist/uploader/index",
+ "van-uploader-demo": "./dist/uploader/demo/index",
"van-switch": "./dist/switch/index",
"van-switch-demo": "./dist/switch/demo/index",
"van-tab": "./dist/tab/index",
diff --git a/example/pages/uploader/index.js b/example/pages/uploader/index.js
index 6eb00a5c..cc11dfda 100644
--- a/example/pages/uploader/index.js
+++ b/example/pages/uploader/index.js
@@ -1,89 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- fileList1: [],
- fileList2: [
- { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
- { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
- ],
- fileList3: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
- fileList4: [],
- fileList5: [],
- fileList6: [],
- cloudPath: [],
- fileList7: [],
- fileList8: [
- {
- url: 'https://img.yzcdn.cn/vant/leaf.jpg',
- status: 'uploading',
- message: '上传中',
- },
- {
- url: 'https://img.yzcdn.cn/vant/tree.jpg',
- status: 'failed',
- message: '上传失败',
- },
- ],
- },
-
- beforeRead(event) {
- const { file, callback = () => {} } = event.detail;
- if (file.url.indexOf('jpeg') < 0) {
- wx.showToast({ title: '请选择jpg图片上传', icon: 'none' });
- callback(false);
- return;
- }
- callback(true);
- },
-
- afterRead(event) {
- const { file, name } = event.detail;
- console.log(JSON.stringify(file, null, 2));
- const fileList = this.data[`fileList${name}`];
-
- this.setData({ [`fileList${name}`]: fileList.concat(file) });
- },
-
- oversize() {
- wx.showToast({ title: '文件超出大小限制', icon: 'none' });
- },
-
- delete(event) {
- const { index, name } = event.detail;
- const fileList = this.data[`fileList${name}`];
- fileList.splice(index, 1);
- this.setData({ [`fileList${name}`]: fileList });
- },
-
- clickPreview() {},
-
- uploadToCloud() {
- wx.cloud.init();
- const { fileList6: fileList = [] } = this.data;
- if (!fileList.length) {
- wx.showToast({ title: '请选择图片', icon: 'none' });
- } else {
- const uploadTasks = fileList.map((file, index) =>
- this.uploadFilePromise(`my-photo${index}.png`, file)
- );
- Promise.all(uploadTasks)
- .then((data) => {
- wx.showToast({ title: '上传成功', icon: 'none' });
- const fileList = data.map((item) => ({ url: item.fileID }));
- this.setData({ cloudPath: data, fileList6: fileList });
- })
- .catch((e) => {
- wx.showToast({ title: '上传失败', icon: 'none' });
- console.log(e);
- });
- }
- },
-
- uploadFilePromise(fileName, chooseResult) {
- return wx.cloud.uploadFile({
- cloudPath: fileName,
- filePath: chooseResult.path,
- });
- },
-});
+Page();
diff --git a/example/pages/uploader/index.wxml b/example/pages/uploader/index.wxml
index 2b3f7f08..96ab2cc7 100644
--- a/example/pages/uploader/index.wxml
+++ b/example/pages/uploader/index.wxml
@@ -1,107 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 上传图片
-
-
-
-
-
-
-
-
-
-
- 上传至云存储
-
-
+
diff --git a/packages/uploader/demo/index.json b/packages/uploader/demo/index.json
new file mode 100644
index 00000000..e3526fe3
--- /dev/null
+++ b/packages/uploader/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-button": "../../button/index",
+ "van-uploader": "../../uploader/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/uploader/demo/index.ts b/packages/uploader/demo/index.ts
new file mode 100644
index 00000000..74e670d5
--- /dev/null
+++ b/packages/uploader/demo/index.ts
@@ -0,0 +1,94 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ fileList1: [],
+ fileList2: [
+ { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
+ { url: 'https://img.yzcdn.cn/vant/tree.jpg' },
+ ],
+ fileList3: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
+ fileList4: [],
+ fileList5: [],
+ fileList6: [],
+ cloudPath: [],
+ fileList7: [],
+ fileList8: [
+ {
+ url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+ status: 'uploading',
+ message: '上传中',
+ },
+ {
+ url: 'https://img.yzcdn.cn/vant/tree.jpg',
+ status: 'failed',
+ message: '上传失败',
+ },
+ ],
+ },
+
+ methods: {
+ beforeRead(event) {
+ const { file, callback = () => {} } = event.detail;
+ if (file.url.indexOf('jpeg') < 0) {
+ wx.showToast({ title: '请选择jpg图片上传', icon: 'none' });
+ callback(false);
+ return;
+ }
+ callback(true);
+ },
+
+ afterRead(event) {
+ const { file, name } = event.detail;
+ console.log(JSON.stringify(file, null, 2));
+ const fileList = this.data[`fileList${name}`];
+
+ this.setData({ [`fileList${name}`]: fileList.concat(file) });
+ },
+
+ oversize() {
+ wx.showToast({ title: '文件超出大小限制', icon: 'none' });
+ },
+
+ delete(event) {
+ const { index, name } = event.detail;
+ const fileList = this.data[`fileList${name}`];
+ fileList.splice(index, 1);
+ this.setData({ [`fileList${name}`]: fileList });
+ },
+
+ clickPreview() {},
+
+ uploadToCloud() {
+ wx.cloud.init();
+ const { fileList6: fileList = [] } = this.data;
+ if (!fileList.length) {
+ wx.showToast({ title: '请选择图片', icon: 'none' });
+ } else {
+ const uploadTasks = fileList.map((file, index) =>
+ this.uploadFilePromise(`my-photo${index}.png`, file)
+ );
+ Promise.all(uploadTasks)
+ .then((data) => {
+ wx.showToast({ title: '上传成功', icon: 'none' });
+ const fileList = data.map((item) => ({ url: item.fileID }));
+ this.setData({
+ cloudPath: data as any,
+ fileList6: fileList as any,
+ });
+ })
+ .catch((e) => {
+ wx.showToast({ title: '上传失败', icon: 'none' });
+ console.log(e);
+ });
+ }
+ },
+
+ uploadFilePromise(fileName, chooseResult) {
+ return wx.cloud.uploadFile({
+ cloudPath: fileName,
+ filePath: chooseResult.path,
+ });
+ },
+ },
+});
diff --git a/packages/uploader/demo/index.wxml b/packages/uploader/demo/index.wxml
new file mode 100644
index 00000000..2b3f7f08
--- /dev/null
+++ b/packages/uploader/demo/index.wxml
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传图片
+
+
+
+
+
+
+
+
+
+
+ 上传至云存储
+
+
diff --git a/packages/uploader/test/__snapshots__/demo.spec.ts.snap b/packages/uploader/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..0e52b35a
--- /dev/null
+++ b/packages/uploader/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传视频
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 文件预览
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 隐藏上传按钮
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传中
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传失败
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 限制上传数量
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义上传样式
+
+
+
+
+
+
+
+
+
+
+
+ 上传图片
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传前校验
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 云存储上传
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 上传至云存储
+
+
+
+
+
+
+
+`;
diff --git a/packages/uploader/test/demo.spec.ts b/packages/uploader/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/uploader/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});