blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

docs(Uploader): update document and demo (#2399)

Browse Source
This commit is contained in:
neverland 2019-11-27 10:49:18 +08:00 committed by GitHub
parent d36cbbb752
commit 58d1186d5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
example/pages/uploader/index.js
View File

@ -2,12 +2,12 @@ import Page from '../../common/page';
Page({ Page({
data: { data: {
fileList1: [], fileList: [],
fileList2: [ fileList2: [
{ url: 'https://img.yzcdn.cn/vant/cat.jpeg', name: '图片1' }, { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
{ url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true } { url: 'https://img.yzcdn.cn/vant/tree.jpg' }
], ],
fileList3: [], fileList3: [{ url: 'https://img.yzcdn.cn/vant/sand.jpg' }],
fileList4: [], fileList4: [],
fileList5: [] fileList5: []
}, },

4
example/pages/uploader/index.wxss
View File

@ -1 +1,3 @@
/* pages/tag/index.wxss */ page {
background-color: #fff;
}

6
example/project.config.json
View File

@ -329,6 +329,12 @@
"pathName": "pages/skeleton/index", "pathName": "pages/skeleton/index",
"query": "", "query": "",
"scene": null "scene": null
},
{
"id": -1,
"name": "uploader",
"pathName": "pages/uploader/index",
"scene": null
} }
] ]
} }

76
packages/uploader/README.md
View File

@ -25,21 +25,21 @@
#### js 示例 #### js 示例
```js ```js
{ Page({
data: { data: {
fileList: [] fileList: []
}, },
methods: { methods: {
afterRead(event) { afterRead(event) {
const { file } = event.detail; const { file } = event.detail;
// 当设置 mutiple 为 true 是 file 是一个数组，mutiple 默认为 false，file 是一个对象 // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
wx.uploadFile({ wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
filePath: file.path, filePath: file.path,
name: 'file', name: 'file',
formData: { 'user': 'test' }, formData: { 'user': 'test' },
success (res){ success (res){
// 上传完成需要更新fileList // 上传完成需要更新 fileList
const { fileList = [] } = this.data; const { fileList = [] } = this.data;
fileList.push({ ...file, url: res.data }); fileList.push({ ...file, url: res.data });
this.setData({ fileList }); this.setData({ fileList });
@ -47,7 +47,7 @@
}); });
} }
} }
} });
``` ```
### 图片预览 ### 图片预览
@ -59,16 +59,16 @@
``` ```
```js ```js
{ Page({
data: { data: {
fileList: [ fileList: [
{ url: 'https://img.yzcdn.cn/vant/cat.jpeg', name: '图片1' }, { url: 'https://img.yzcdn.cn/vant/leaf.jpg', name: '图片1' },
// Uploader 根据文件后缀来判断是否为图片文件 // Uploader 根据文件后缀来判断是否为图片文件
// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明 // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
{ url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true } { url: 'http://iph.href.lu/60x60?text=default', name: '图片2', isImage: true }
] ]
} }
} });
``` ```
### 限制上传数量 ### 限制上传数量
@ -76,7 +76,11 @@
通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域 通过`max-count`属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域
```html ```html
<van-uploader file-list="{{ fileList }}" max-count="2" bind:after-read="afterRead" /> <van-uploader
file-list="{{ fileList }}"
max-count="2"
bind:after-read="afterRead"
/>
``` ```
### 自定义上传样式 ### 自定义上传样式
@ -94,57 +98,57 @@
将`use-before-read`属性设置为`true`，然后绑定 `before-read` 事件可以在上传前进行校验，调用 `callback` 方法传入 `true` 表示校验通过，传入 `false` 表示校验失败。 将`use-before-read`属性设置为`true`，然后绑定 `before-read` 事件可以在上传前进行校验，调用 `callback` 方法传入 `true` 表示校验通过，传入 `false` 表示校验失败。
```html ```html
<van-uploader file-list="{{ fileList }}" use-before-read="{{ true }}" bind:before-read="beforeRead" bind:after-read="afterRead" /> <van-uploader
file-list="{{ fileList }}"
use-before-read
bind:before-read="beforeRead"
bind:after-read="afterRead"
/>
``` ```
```js ```js
{ Page({
data: { data: {
fileList: [] fileList: []
}, },
methods: { methods: {
beforeRead(event) { beforeRead(event) {
const { file, callback = () => {} } = event.detail; const { file, callback } = event.detail;
console.log('before上传', file); callback(file.type === 'image');
if (file.type !== 'image') {
callback(false);
return;
}
callback(true);
} }
} }
} });
``` ```
### Props ### Props
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-----------|-----------| |-----------|-----------|-----------|-----------|-----------|
| name | 标识符，可以在回调函数的第二项参数中获取 | _string \| number_ | - | | name | 标识符，可以在回调函数的第二项参数中获取 | *string \| number* | - |
| accept | 接受的文件类型, 可选值为`all` `image` `file` | _string_ | `image` | | accept | 接受的文件类型, 可选值为`all` `image` `file` | *string* | `image` |
| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _string \| number_ | `80px` | | preview-size | 预览图和上传区域的尺寸，默认单位为`px` | *string \| number* | `80px` |
| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | | preview-image | 是否在上传完成后展示预览图 | *boolean* | `true` |
| preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | | preview-full-image | 是否在点击预览图后展示全屏图片预览 | *boolean* | `true` |
| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` | | multiple | 是否开启图片多选，部分安卓机型不支持 | *boolean* | `false` |
| disabled | 是否禁用文件上传 | _boolean_ | `false` | | disabled | 是否禁用文件上传 | *boolean* | `false` |
| capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | _string \| Array_ | `['album', 'camera']` | | capture | 图片选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | *string \| string[]* | `['album', 'camera']` |
| disabled | 是否禁用文件上传 | _boolean_ | `false` | | disabled | 是否禁用文件上传 | *boolean* | `false` |
| max-size | 文件大小限制，单位为`byte` | _number_ | - | | max-size | 文件大小限制，单位为`byte` | *number* | - |
| max-count | 文件上传数量限制 | _number_ | - | | max-count | 文件上传数量限制 | *number* | - |
| upload-text | 上传区域文字提示 | _string_ | - | | upload-text | 上传区域文字提示 | *string* | - |
| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | _string_ | `scaleToFill` | | image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` |
### Slot ### Slot
| 名称 | 说明 | | 名称 | 说明 |
| ---- | -------------------------------- | |-----------|-----------|
| - | 自定义上传样式，用法见上面的例子 | | - | 自定义上传样式 |
### Event ### Event
| 事件名 | 说明 | 参数 | | 事件名 | 说明 | 回调参数 |
| ------------------ | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | |-----------|-----------|-----------|
| bind:before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 | | bind:before-read | 文件读取前的回调函数，返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 |
| bind:after-read | 文件读取完成后的回调函数 | `event.detail.file`: 当前读取的文件 | | bind:after-read | 文件读取完成后的回调函数 | `event.detail.file`: 当前读取的文件 |
| bind:oversize | 文件超出大小限制的回调函数 | - | | bind:oversize | 文件超出大小限制的回调函数 | - |

92
packages/uploader/index.wxml
View File

@ -1,60 +1,56 @@
<wxs src="../wxs/utils.wxs" module="utils" /> <wxs src="../wxs/utils.wxs" module="utils" />
<view <view class="van-uploader">
class="van-uploader"
>
<view class="van-uploader__wrapper"> <view class="van-uploader__wrapper">
<!-- 预览样式 --> <!-- 预览样式 -->
<block wx:if="{{ previewImage }}"> <view
wx:if="{{ previewImage }}"
wx:for="{{ lists }}"
wx:key="index"
class="van-uploader__preview"
>
<image
wx:if="{{ item.isImage }}"
mode="{{ imageFit }}"
src="{{ item.url || item.path }}"
alt="{{ item.name || ('图片' + index) }}"
class="van-uploader__preview-image"
style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
data-url="{{ item.url || item.path }}"
bind:tap="doPreviewImage"
/>
<view <view
wx:for="{{ lists }}" wx:else
wx:key="index" class="van-uploader__file"
class="van-uploader__preview" style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
> >
<image <van-icon name="description" class="van-uploader__file-icon" />
wx:if="{{ item.isImage }}" <view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
mode="{{ imageFit }}"
src="{{ item.url || item.path }}"
alt="{{ item.name || ('图片' + index) }}"
class="van-uploader__preview-image"
style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
data-url="{{ item.url || item.path }}"
bind:tap="doPreviewImage"
/>
<view
wx:else
class="van-uploader__file"
style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
>
<van-icon name="description" class="van-uploader__file-icon" />
<view class="van-uploader__file-name van-ellipsis">{{ item.name || item.url || item.path }}</view>
</view>
<van-icon
name="delete"
class="van-uploader__preview-delete"
bind:tap="deleteItem"
data-index="{{ index }}"
/>
</view> </view>
</block> <van-icon
name="delete"
class="van-uploader__preview-delete"
data-index="{{ index }}"
bind:tap="deleteItem"
/>
</view>
<!-- 上传样式 --> <!-- 上传样式 -->
<block wx:if="{{ isInCount }}"> <block wx:if="{{ isInCount }}">
<block wx:if="{{ useSlot }}"> <view wx:if="{{ useSlot }}" class="van-uploader__slot" bind:tap="startUpload">
<view class="van-uploader__slot" bind:tap="startUpload"> <slot />
<slot /> </view>
</view>
</block> <!-- 默认上传样式 -->
<block wx:else> <view
<!-- 默认上传样式 --> wx:else
<view class="van-uploader__upload"
class="van-uploader__upload" style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};"
style="width: {{ computedPreviewSize }}; height: {{ computedPreviewSize }};" bind:tap="startUpload"
bind:tap="startUpload" >
> <van-icon name="plus" class="van-uploader__upload-icon" />
<van-icon name="plus" class="van-uploader__upload-icon" /> <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
<text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text> </view>
</view>
</block>
</block> </block>
</view> </view>
</view> </view>