更新记录

1.0.3(2024-04-26) 下载此版本

无法多选bug

1.0.2(2024-04-25) 下载此版本

修复对后端不同返回处理的bug

1.0.1(2024-04-24) 下载此版本

完成基本功能

查看更多

平台兼容性

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

hr-upload 组件文档

hr-upload 组件旨在简化文件上传流程,支持自动或手动上传、文件类型过滤及自定义样式等功能。该组件可处理图片、视频等文件,与官方不同的是,不需要开通uniCloud,直接上传到任意后端服务器。

安装

你可以通过以下链接下载并安装 hr-upload 组件:

点击下载&安装

功能特点

  • 支持图片和视频的选择及上传
  • 自动化上传功能
  • 文件类型及数量限制
  • 自定义上传文件的列表显示模式
  • 自定义文件选择按钮样式

使用须知

::: warning 注意事项 请在使用组件前仔细阅读以下注意事项,以避免错误使用:

  • 目前文件选择功能仅支持 H5微信小程序 平台,其中微信小程序使用 wx.chooseMessageFile()。 :::

参数配置

以下是 hr-upload 组件的参数配置表,包括所有可用的 props

参数名 类型 默认值 说明
modelValue|value Array [] 绑定上传文件的数组
autoUpload Boolean true 是否自动上传文件
limit Number/String 9 最多可选择的文件数量
mode String "grid" 文件列表显示模式
fileMediaType String "image" 可选择的文件类型
accept String - 可选择的文件扩展名
imageStyles Object {} 图片文件的样式
readonly Boolean false 是否为只读
sizeType Array ["original", "compressed"] 图片尺寸类型
sourceType Array ["album", "camera"] 文件源类型
action String 必填 服务器接口路径
header Object {} 请求头部
data Object {} 附加数据
name String "file" 上传文件时的名称字段
withCredentials Boolean false 跨站点访问控制
transformResponse Function 必填 处理上传后的响应数据

transformResponse特别说明

由于每个项目的后端对于文件上传后的响应是不一样的,有的直接响应一个地址,有的响应一个对象,组件为了统一处理各情况,支持用户自己传入一个函数transformResponse, 它的参数是后端的响应体,要求函数返回两种类型的值:

  • 一个表示全路径的url字符串;
  • 或一个数组,数组的第一个值是文件的全路径url,第二个值是文件对象,其中有url属性和其它属性(这些属性会合并到file对象中去);

如下所示:

<template>
    <hr-file-picker
        action="'https://www.mocky.io/v2/upload'"
        name="file"
        v-model="eventImages"
        :header="headerComputed"
        :uploadSuccess="handleUploadSuccess"
    />
</template>

<script>
export default {
  data() {
    return {
      eventImages: [],
    };
  },
  computed: {
    headerComputed() {
      return {
        Authorization: "Bearer " + uni.getStorageSync(ACCESS_TOKEN_KEY),
      };
    },
  },
  methods: {
    handleUploadSuccess(response) {
      const { code, data, msg } = response;
      if (code === 0) {
        // 其中data是file对象,有url属性和其它属性
        // 可以返回一个字符串url
        return data.url;
        // 也可以返回一个数组
        return [data.url, data];
        // 如果data是一个字符串,直接返回data
        return data;
      } else {
        throw new Error(msg);
      }
    },
  },
};
</script>

方法

hr-upload 组件提供以下方法,通过 $refs 调用:

方法名 说明 参数
upload 手动上传文件 -

事件

组件提供以下事件,用于处理文件选择和上传的各种场景:

事件名 说明 返回值
select 文件选择后触发 选择的文件信息
delete 删除文件时触发 删除的文件信息
update:modelValue 文件数组更新时触发 更新后的文件数组

示例

参考上面的transformResponse特别说明

样式定制

使用 imageStylesmode 参数,可以自定义上传组件的外观和布局,使其更贴合你的页面设计。

<hr-upload
  v-model="fileList"
  file-mediatype="image"
  mode="grid"
  :image-styles="{ width: '100px', height: '100px', border: '1px solid black' }"
/>

隐私、权限声明

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

1. Android 对于 Android 应用,如果要让用户从设备上选择文件,你可能需要请求存储权限: 读取存储权限(READ_EXTERNAL_STORAGE):允许应用从设备的外部存储中读取数据。 写入存储权限(WRITE_EXTERNAL_STORAGE):如果用户需要能够保存文件到设备,这个权限可能也是必需的,尽管从 Android 10 开始,对于访问 app 自己的下载文件夹等不需要这个权限。 从 Android 6.0(API 级别 23)开始,你需要在运行时请求权限,这意味着需要在代码中实现权限请求的逻辑。 2. iOS 在 iOS 上,文件选择通常不需要额外的权限,因为使用的是沙盒环境,应用只能访问其指定的文件系统区域。然而,如果应用需要访问用户的照片库、相机或其他媒体文件,你可能需要: 照片库访问权限:需要在你的 Info.plist 文件中添加 NSPhotoLibraryUsageDescription 键,并提供一个说明为何应用需要此权限的描述。

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

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

许可协议

MIT协议

暂无用户评论。

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