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