diff --git a/packages/uploader/README.md b/packages/uploader/README.md index 00c3f722..7c1b9d3f 100644 --- a/packages/uploader/README.md +++ b/packages/uploader/README.md @@ -87,10 +87,10 @@ Page({ ### 自定义上传样式 -将`use-slot`属性设置为`true`,通过插槽可以自定义上传区域的样式 +通过插槽可以自定义上传区域的样式 ```html - + 上传图片 ``` @@ -179,18 +179,20 @@ uploadFilePromise(fileName, chooseResult) { | max-count | 文件上传数量限制 | *number* | - | - | | upload-text | 上传区域文字提示 | *string* | - | - | | image-fit | 预览图裁剪模式,可选值参考小程序`image`组件的`mode`属性 | *string* | `scaleToFill` | - | +| use-before-read | 是否开启文件读取前事件 | *boolean* | - | - | + ### 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 | 文件超出大小限制的回调函数 | - | -| bind:click-preview | 点击预览图片的回调函数 | `event.detail.index`: 点击图片的序号值 | -| bind:delete | 删除图片的回调函数 | `event.detail.index`: 删除图片的序号值 | \ No newline at end of file +| bind:before-read | 文件读取前,在回调函数中返回 `false` 可终止文件读取,绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件,`event.detail.callback`: 回调函数,调用`callback(false)`终止文件读取 | +| bind:after-read | 文件读取完成后 | `event.detail.file`: 当前读取的文件 | +| bind:oversize | 文件超出大小限制 | - | +| bind:click-preview | 点击预览图片 | `event.detail.index`: 点击图片的序号值 | +| bind:delete | 删除图片 | `event.detail.index`: 删除图片的序号值 | diff --git a/packages/uploader/index.less b/packages/uploader/index.less index 769f5a8b..cf3388c8 100644 --- a/packages/uploader/index.less +++ b/packages/uploader/index.less @@ -9,6 +9,14 @@ flex-wrap: wrap; } + &__slot:empty { + display: none; + } + + &__slot:not(:empty) + &__upload { + display: none !important; + } + &__upload { position: relative; display: flex; diff --git a/packages/uploader/index.ts b/packages/uploader/index.ts index 2edc9ec0..f966fcfb 100644 --- a/packages/uploader/index.ts +++ b/packages/uploader/index.ts @@ -6,7 +6,6 @@ VantComponent({ disabled: Boolean, multiple: Boolean, uploadText: String, - useSlot: Boolean, useBeforeRead: Boolean, previewSize: { type: null, @@ -20,6 +19,10 @@ VantComponent({ type: String, value: 'image' }, + capture: { + type: Array, + value: ['album', 'camera'] + }, fileList: { type: Array, value: [], @@ -72,9 +75,9 @@ VantComponent({ if (this.data.disabled) return; const { name = '', - capture = ['album', 'camera'], - maxCount = 100, - multiple = false, + capture, + maxCount, + multiple, maxSize, accept, lists, @@ -104,43 +107,47 @@ VantComponent({ }); } - chooseFile.then( - ( - res: - | WechatMiniprogram.ChooseImageSuccessCallbackResult - | WechatMiniprogram.ChooseMessageFileSuccessCallbackResult - ) => { - const file = multiple ? res.tempFiles : res.tempFiles[0]; + chooseFile + .then( + ( + res: + | WechatMiniprogram.ChooseImageSuccessCallbackResult + | WechatMiniprogram.ChooseMessageFileSuccessCallbackResult + ) => { + const file = multiple ? res.tempFiles : res.tempFiles[0]; - // 检查文件大小 - if (file instanceof Array) { - const sizeEnable = file.every(item => item.size <= maxSize); - if (!sizeEnable) { + // 检查文件大小 + if (file instanceof Array) { + const sizeEnable = file.every(item => item.size <= maxSize); + if (!sizeEnable) { + this.$emit('oversize', { name }); + return; + } + } else if (file.size > maxSize) { this.$emit('oversize', { name }); return; } - } else if (file.size > maxSize) { - this.$emit('oversize', { name }); - return; - } - // 触发上传之前的钩子函数 - if (useBeforeRead) { - this.$emit('before-read', { - file, - name, - callback: (result: boolean) => { - if (result) { - // 开始上传 - this.$emit('after-read', { file, name }); + // 触发上传之前的钩子函数 + if (useBeforeRead) { + this.$emit('before-read', { + file, + name, + callback: (result: boolean) => { + if (result) { + // 开始上传 + this.$emit('after-read', { file, name }); + } } - } - }); - } else { - this.$emit('after-read', { file, name }); + }); + } else { + this.$emit('after-read', { file, name }); + } } - } - ); + ) + .catch(error => { + this.$emit('error', error); + }); }, deleteItem(event) { diff --git a/packages/uploader/index.wxml b/packages/uploader/index.wxml index 0a84848c..81223fd1 100644 --- a/packages/uploader/index.wxml +++ b/packages/uploader/index.wxml @@ -38,13 +38,12 @@ - +