更新记录

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

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

1.0.0(2024-08-07) 下载此版本

首次发布


平台兼容性

HbuilderX/cli最低兼容版本
3.7.6

uni-app

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

uni-app x

app-android app-ios
? ?
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

隐私、权限声明

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

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

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

许可协议

MIT协议

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