更新记录

1.0.3（2024-04-26）

无法多选bug

1.0.2（2024-04-25）

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

1.0.1（2024-04-24）

完成基本功能

平台兼容性

hr-upload 组件文档

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

安装

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

点击下载&安装

功能特点

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

使用须知

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

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

参数配置

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

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 调用：

事件

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

示例

参考上面的transformResponse特别说明

样式定制

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

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