mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Uploader): add demo test
This commit is contained in:
nemo-shen
neverland
parent
390eab8d0d
commit
5778acc088
@ -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",
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1,107 +1 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-uploader
|
||||
name="1"
|
||||
file-list="{{ fileList1 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传视频" padding>
|
||||
<van-uploader
|
||||
name="7"
|
||||
accept="video"
|
||||
file-list="{{ fileList7 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="文件预览" padding>
|
||||
<van-uploader
|
||||
name="2"
|
||||
file-list="{{ fileList2 }}"
|
||||
multiple
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="隐藏上传按钮" padding>
|
||||
<van-uploader
|
||||
name="2"
|
||||
file-list="{{ fileList2 }}"
|
||||
multiple
|
||||
show-upload="{{ false }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传状态" padding>
|
||||
<van-uploader
|
||||
name="8"
|
||||
file-list="{{ fileList8 }}"
|
||||
multiple
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="限制上传数量" padding>
|
||||
<van-uploader
|
||||
name="3"
|
||||
file-list="{{ fileList3 }}"
|
||||
multiple
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义上传样式" padding>
|
||||
<van-uploader
|
||||
name="4"
|
||||
file-list="{{ fileList4 }}"
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-slot="{{ true }}"
|
||||
>
|
||||
<van-button icon="photo" type="primary">上传图片</van-button>
|
||||
</van-uploader>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传前校验" padding>
|
||||
<van-uploader
|
||||
name="5"
|
||||
file-list="{{ fileList5 }}"
|
||||
bind:before-read="beforeRead"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-before-read="{{ true }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="云存储上传" padding>
|
||||
<van-uploader
|
||||
name="6"
|
||||
file-list="{{ fileList6 }}"
|
||||
bind:before-read="beforeRead"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-before-read="{{ true }}"
|
||||
/>
|
||||
<view class="demo-margin-bottom">
|
||||
<van-button type="primary" bind:click="uploadToCloud">上传至云存储</van-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
<van-uploader-demo />
|
||||
|
||||
8
packages/uploader/demo/index.json
Normal file
8
packages/uploader/demo/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-button": "../../button/index",
|
||||
"van-uploader": "../../uploader/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
94
packages/uploader/demo/index.ts
Normal file
94
packages/uploader/demo/index.ts
Normal file
@ -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,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
107
packages/uploader/demo/index.wxml
Normal file
107
packages/uploader/demo/index.wxml
Normal file
@ -0,0 +1,107 @@
|
||||
<demo-block title="基础用法" padding>
|
||||
<van-uploader
|
||||
name="1"
|
||||
file-list="{{ fileList1 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传视频" padding>
|
||||
<van-uploader
|
||||
name="7"
|
||||
accept="video"
|
||||
file-list="{{ fileList7 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="文件预览" padding>
|
||||
<van-uploader
|
||||
name="2"
|
||||
file-list="{{ fileList2 }}"
|
||||
multiple
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="隐藏上传按钮" padding>
|
||||
<van-uploader
|
||||
name="2"
|
||||
file-list="{{ fileList2 }}"
|
||||
multiple
|
||||
show-upload="{{ false }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传状态" padding>
|
||||
<van-uploader
|
||||
name="8"
|
||||
file-list="{{ fileList8 }}"
|
||||
multiple
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="限制上传数量" padding>
|
||||
<van-uploader
|
||||
name="3"
|
||||
file-list="{{ fileList3 }}"
|
||||
multiple
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="自定义上传样式" padding>
|
||||
<van-uploader
|
||||
name="4"
|
||||
file-list="{{ fileList4 }}"
|
||||
max-count="{{ 2 }}"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-slot="{{ true }}"
|
||||
>
|
||||
<van-button icon="photo" type="primary">上传图片</van-button>
|
||||
</van-uploader>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="上传前校验" padding>
|
||||
<van-uploader
|
||||
name="5"
|
||||
file-list="{{ fileList5 }}"
|
||||
bind:before-read="beforeRead"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-before-read="{{ true }}"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="云存储上传" padding>
|
||||
<van-uploader
|
||||
name="6"
|
||||
file-list="{{ fileList6 }}"
|
||||
bind:before-read="beforeRead"
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
bind:click-preview="clickPreview"
|
||||
use-before-read="{{ true }}"
|
||||
/>
|
||||
<view class="demo-margin-bottom">
|
||||
<van-button type="primary" bind:click="uploadToCloud">上传至云存储</van-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
705
packages/uploader/test/__snapshots__/demo.spec.ts.snap
Normal file
705
packages/uploader/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,705 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
上传视频
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
文件预览
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{0}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片0"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{0}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{0}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{1}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片1"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{1}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/tree.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{1}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
隐藏上传按钮
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{0}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片0"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{0}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{0}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{1}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片1"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{1}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/tree.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{1}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
上传状态
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{0}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片0"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{0}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/leaf.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__mask"
|
||||
>
|
||||
<van-loading
|
||||
customClass="van-uploader__loading"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-loading"
|
||||
>
|
||||
<wx-view
|
||||
class="van-loading__spinner van-loading__spinner--circular"
|
||||
style=""
|
||||
/>
|
||||
<wx-view
|
||||
class="van-loading__text"
|
||||
style=""
|
||||
/>
|
||||
</wx-view>
|
||||
</van-loading>
|
||||
<wx-text
|
||||
class="van-uploader__mask-message"
|
||||
>
|
||||
上传中
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{0}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{1}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片1"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{1}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/tree.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__mask"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__mask-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-close"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<wx-text
|
||||
class="van-uploader__mask-message"
|
||||
>
|
||||
上传失败
|
||||
</wx-text>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{1}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
限制上传数量
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__preview"
|
||||
data-index="{{0}}"
|
||||
bind:tap="onClickPreview"
|
||||
>
|
||||
<wx-image
|
||||
alt="图片0"
|
||||
class="van-uploader__preview-image"
|
||||
data-index="{{0}}"
|
||||
mode="scaleToFill"
|
||||
src="https://img.yzcdn.cn/vant/sand.jpg"
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="onPreviewImage"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__preview-delete"
|
||||
data-index="{{0}}"
|
||||
catch:tap="deleteItem"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__preview-delete-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-cross"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义上传样式
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
useSlot="{{true}}"
|
||||
bind:after-read="afterRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-button>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--primary van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style=""
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<van-icon
|
||||
class="van-button__icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photo"
|
||||
style="font-size:1.2em;line-height: inherit;"
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
上传图片
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
上传前校验
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:before-read="beforeRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
云存储上传
|
||||
</wx-view>
|
||||
<van-uploader
|
||||
bind:after-read="afterRead"
|
||||
bind:before-read="beforeRead"
|
||||
bind:click-preview="clickPreview"
|
||||
bind:delete="delete"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__wrapper"
|
||||
>
|
||||
<wx-view
|
||||
class="van-uploader__slot"
|
||||
bind:tap="startUpload"
|
||||
/>
|
||||
<wx-view
|
||||
class="van-uploader__upload "
|
||||
style="width:80px;height:80px"
|
||||
bind:tap="startUpload"
|
||||
>
|
||||
<van-icon
|
||||
class="van-uploader__upload-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-photograph"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</van-uploader>
|
||||
<wx-view
|
||||
class="demo-margin-bottom"
|
||||
>
|
||||
<van-button
|
||||
bind:click="uploadToCloud"
|
||||
>
|
||||
<wx-button
|
||||
appParameter=""
|
||||
ariaLabel=""
|
||||
businessId="{{0}}"
|
||||
class="custom-class van-button van-button--primary van-button--normal "
|
||||
data-detail="{{null}}"
|
||||
formType=""
|
||||
hoverClass="van-button--active hover-class"
|
||||
id=""
|
||||
lang=""
|
||||
openType=""
|
||||
sendMessageImg=""
|
||||
sendMessagePath=""
|
||||
sendMessageTitle=""
|
||||
sessionFrom=""
|
||||
showMessageCard="{{false}}"
|
||||
style=""
|
||||
bind:contact="onContact"
|
||||
bind:error="onError"
|
||||
bind:getphonenumber="onGetPhoneNumber"
|
||||
bind:getuserinfo="onGetUserInfo"
|
||||
bind:launchapp="onLaunchApp"
|
||||
bind:opensetting="onOpenSetting"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-button__text"
|
||||
>
|
||||
上传至云存储
|
||||
</wx-view>
|
||||
</wx-button>
|
||||
</van-button>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
</main>
|
||||
`;
|
||||
11
packages/uploader/test/demo.spec.ts
Normal file
11
packages/uploader/test/demo.spec.ts
Normal file
@ -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();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user