更新记录

1.0.2（2025-03-26） 下载此版本

更新默认的限制文件大小的bug

1.0.0（2025-03-25） 下载此版本

图片文件视频上传组件。使用的是vue3方式。 支持限制上传个数，文件大小，可直接上传远程上传的api

平台兼容性

zhk-file-upload

作者：zhk-阿康

一个实现了简单快捷的文件上传组件，需要使用uni-icon组件， 支持图片、视频和普通文件的上传。

功能特点

• 支持图片、视频和普通文件上传
• 可配置最大上传数量
• 支持文件大小限制
• 支持图片压缩
• 支持视频时长限制
• 支持文件类型限制
• 支持上传进度显示
• 支持文件预览
• 支持文件删除
• 支持自定义上传 API
• 支持选择来源（相册/相机）
• 显示上传文件计数（已上传/最大数量）
• 支持上传请求添加自定义token验证
• 使用阿里巴巴矢量图标库美化界面
• 兼容微信小程序平台（使用uniCloud.chooseAndUploadFile）

安装

1. 在 uni-app 项目中，将 zhk-file-upload 文件夹复制到 uni_modules 目录下
2. 在页面中直接使用组件：
3. 配置图标：使用uni-icon组件

使用示例

图片上传

<template>
  <zhk-file-upload
    type="image"
    :max-count="9"
    :max-size="2"
    :compress="true"
    :source="['album', 'camera']"
    token-name="Authorization"
    token-value="Bearer xxxxxxxx"
    @select="handleSelect"
    @success="handleSuccess"
    @progress="handleProgress"
    @delete="handleDelete"
  />
</template>

<script setup>
const handleSelect = (files) => {
  console.log('选择的文件：', files)
}

const handleSuccess = (file) => {
  console.log('上传成功：', file)
}

const handleProgress = (file, progress) => {
  console.log('上传进度：', progress)
}

const handleDelete = (file) => {
  console.log('删除文件：', file)
}
</script>

视频上传

<template>
  <zhk-file-upload
    type="video"
    :max-count="3"
    :max-duration="50"
    :source="['album', 'camera']"
    token-name="Authorization"
    token-value="Bearer xxxxxxxx"
    @select="handleSelect"
    @success="handleSuccess"
    @progress="handleProgress"
    @delete="handleDelete"
  />
</template>

文件上传

<template>
  <zhk-file-upload
    type="file"
    :max-count="5"
    :max-size="10"
    :file-types="['doc', 'docx', 'pdf', 'zip']"
    token-name="Authorization"
    token-value="Bearer xxxxxxxx"
    @select="handleSelect"
    @success="handleSuccess"
    @progress="handleProgress"
    @delete="handleDelete"
  />
</template>

Props

Events

使用的图标

组件中使用了uni-icon组件图标

注意事项

1. 图片上传模式下，一行显示4张图片，如果想显示3张或者其他，请自行在image-upload文件中修改css样式
2. 视频上传模式下，一行显示1个视频
3. 文件上传模式下，以列表形式展示
4. 如果配置 uploadUrl 属性，上传成功后，执行success的方法，参数是后端返回的data
5. 如果不配置 uploadUrl 属性，则执行select的方法。
6. 删除delete方法的参数里，有一个属性 index 是删除图片的索引
7. 图片压缩功能仅在上传图片时有效
8. 文件类型限制仅在上传普通文件时有效
9. 视频时长限制仅在上传视频时有效
10. 当需要在上传请求中添加token验证时，请配置 tokenName 和 tokenValue 属性
11. 在微信小程序环境中，由于平台限制，普通文件上传功能会转为从微信聊天记录中选择功能

平台兼容性

• type="image" - 支持所有平台
• type="video" - 支持所有平台
• type="file" - 使用uniCloud.chooseAndUploadFile增强了对微信小程序的支持

微信小程序文件上传

此组件使用uniCloud.chooseAndUploadFile方法增强了在微信小程序环境下的文件选择和上传能力。该方法提供了统一的文件选择接口，可以在各端选择媒体文件或非媒体文件。

在微信小程序中，此方法会根据指定的文件类型调用相应的API：

1. 图片文件：调用wx.chooseImage
2. 视频文件：调用wx.chooseVideo
3. 其他类型：尝试使用wx.chooseMessageFile（仅在微信小程序可用，且要求用户主动从聊天记录选择文件）

组件内部已经进行了兼容性处理，如果uniCloud.chooseAndUploadFile不可用，会降级使用其他可用方法。

默认情况下，选择的文件不会自动上传到uniCloud，而是会使用组件配置的uploadUrl进行上传。

示例代码

完整的示例代码请参考 example 目录。