mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
fix(Uploader): remove use-slot & catch upload error & fix prop capture not work (#2551)
fix #2541, fix #2544
This commit is contained in:
rex
GitHub
parent
4527c31c6c
commit
1d93057061
@ -87,10 +87,10 @@ Page({
|
||||
|
||||
### 自定义上传样式
|
||||
|
||||
将`use-slot`属性设置为`true`，通过插槽可以自定义上传区域的样式
|
||||
通过插槽可以自定义上传区域的样式
|
||||
|
||||
```html
|
||||
<van-uploader use-slot>
|
||||
<van-uploader>
|
||||
<van-button icon="photo" type="primary">上传图片</van-button>
|
||||
</van-uploader>
|
||||
```
|
||||
@ -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`: 删除图片的序号值 |
|
||||
| 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`: 删除图片的序号值 |
|
||||
|
||||
@ -9,6 +9,14 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__slot:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__slot:not(:empty) + &__upload {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&__upload {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -38,13 +38,12 @@
|
||||
|
||||
<!-- 上传样式 -->
|
||||
<block wx:if="{{ isInCount }}">
|
||||
<view wx:if="{{ useSlot }}" class="van-uploader__slot" bind:tap="startUpload">
|
||||
<view class="van-uploader__slot" bind:tap="startUpload">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
<!-- 默认上传样式 -->
|
||||
<view
|
||||
wx:else
|
||||
class="van-uploader__upload"
|
||||
style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
|
||||
bind:tap="startUpload"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user