更新记录

1.1.1(2024-11-06) 下载此版本

优化使用 wxMessage 属性选取图片

1.1.0(2024-10-28) 下载此版本

使用 wxMessage 属性可以从微信聊天中选取内容

1.0.1(2024-08-08) 下载此版本

修复超过数量还能继续添加BUG

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

使用示例

<template>
    <sh-upload v-model="fileList" :onUpload="onUpload"></sh-upload>
</template>

<script setup>
import { ref } from 'vue'
const fileList = ref([])
const onUpload = async (file) => {
  const { tempFilePath, fileType, size } = file
    const uploadRes =await yourUploadApi(tempFilePath)
    uploadRes.type = fileType
    return {
    url: uploadRes.url,
    type: fileType,
    name: uploadRes.name,
    poster: uploadRes.poster, // 只有fileType为video时生效 组件默认用户上传至阿里云,默认阿里云显示视频封面
  }
}
</script>

属性

属性 类型 默认值 必填 说明 平台差异
v-model Array [] { url: string, type?: string, name?: string, poster?: string }[] type默认值为 image
onUpload Function ({ tempFilePath: string, size: number, fileType?: string, name?: string }) => Promise<{ url: string, type?: string, name?: string, poster?: string }> 调用用户自定义上传方法 函数参数name仅H5平台才会返回真实文件名
limit Number 9 最大上传数量
count Number 9 最多可以同时选择的文件个数
mediaType Array ['image'] 媒体类型,可选值,image-图片,video-视频,mix-图片或视频 mix仅支持微信小程序、抖音小程序、飞书小程序、京东小程序
sourceType Array ['album', 'camera'] 图片和视频选择的来源,可选值,album-从相册选择,camera-使用相机拍摄
sizeType Array ['original', 'compressed'] 仅对 mediaType 为 image 时有效,是否压缩所选文件 H5、 QQ小程序、快手小程序不支持
camera String back 仅在 sourceType 为 camera 时生效,使用前置或后置摄像头 可选值 back-使用后置摄像头 front-使用前置摄像头
maxDuration Number 10 拍摄视频最长拍摄时间,单位秒。时间范围为 3s 至 30s 之间
maxSize Number 0 上传文件大小限制,0为不限制
mode String aspectFill 图片裁剪、缩放的模式 同image组件的mode属性
width String 、 Number 160 内部预览图片区域和选择图片按钮的区域宽度,单位rpx
height String 、 Number 160 内部预览图片区域和选择图片按钮的区域高度,单位rpx
radius String 、 Number 8 内部预览图片区域和选择图片按钮的区域圆角,单位rpx
wxMessage Boolean false 是否从微信聊天记录中选择文件,为true时mediaType只支持 ['image'] 或 ['video'], sourceType传入[]时只从微信聊天记录中选择 仅在微信和QQ小程序中生效

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问