hr-file-picker - DCloud 插件市场

更新记录

1.0.6（2024-11-03）下载此版本

完善视频上传

1.0.5（2024-11-02）下载此版本

添加视频支持

1.0.4（2024-11-02）下载此版本

init

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.1.0 app-vue app-nvue	×	√	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	√	√	√	√

::: tip 组件名：uni-file-picker

点击下载&安装 :::

文件选择上传组件，可以选择图片、视频等任意文件并上传到当前自己的后端服务器;

介绍

::: warning 注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

组件需要依赖 sass 插件，请自行手动安装
选择文件目前只支持 H5 和 微信小程序平台 ，且 微信小程序平台 使用 wx.chooseMessageFile()
v-model 值需要自动上传成功后才会绑定值，一般只用来回显数据 :::

基础用法

<template>
  <view class="content">
    <hr-file-picker
      :action="uploadUrlComputed"
      name="file"
      mode="grid"
      fileMediaType="video"
      v-model="videoList"
      :header="headerComputed"
      :data="{
        moduleName: 'hzz',
        childDir: 'dcdb',
        fileType: '1',
      }"
      :limit="6"
      :uploadSuccess="handleUploadSuccess"
    />
  </view>
</template>

<script setup>
  import { ref, reactive, computed, onMounted } from "vue";

  const videoList = ref([]);

  const uploadUrlComputed = computed(() => {
    return "./api/common/upload";
  });

  const headerComputed = computed(() => {
    return {
      Authorization: "bearer 945618d7-ae9d-405b-9a05-50bda6760a86",
    };
  });

  const handleUploadSuccess = (response) => {
    const { code, data, msg } = response;
    if (code === 0) {
      const result =
        "https://smartgate.changsha.gov.cn/csszhslapp/ycjl_hzz_app/ftp/" +
        data[0].filePath;
      console.log(result);
      return [result, data[0]];
    } else {
      throw new Error(msg);
    }
  };
</script>

<style>
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

选择指定后缀图片，且限制选择个数

配置 file-mediatype 属性为 image，限定只选择图片

配置 file-extname 属性为 'png,jpg'，限定只选择 png和jpg后缀的图片

配置 limit 属性为 1 ，则最多选择一张图片

配置 mode 属性为 grid ，可以使用九宫格样式选择图片

手动上传

配置 auto-upload 属性为 false ，可以停止自动上传，通过ref调用upload方法自行选择上传时机

<template>
  <view>
    <hr-file-picker ref="files" :auto-upload="false" />
    <button @click="upload">上传文件</button>
  </view>
</template>
<script>
  export default {
    data() {},
    methods: {
      upload() {
        this.$refs.files.upload();
      },
    },
  };
</script>

单选图片且点击再次选择

配置 disable-preview 属性为 true，禁用点击预览图片功能

配置 del-icon 属性为 false，隐藏删除按钮

配置 return-type 属性为 object，设置 value 类型，如需绑定 array类型，则设置limit:1，可达到一样的效果

<hr-file-picker disable-preview :del-icon="false" return-type="object"
  >选择头像</hr-file-picker
>

自定义样式

配置 image-styles 属性，可以自定义mode:image时的回显样式

配置 list-styles 属性，可以自定义mode:video|| mode:all时的回显样式

<template>
  <view>
    <hr-file-picker fileMediatype="image" :image-styles="imageStyles" />
    <hr-file-picker fileMediatype="all" :list-styles="listStyles" />
  </view>
</template>
<script>
  export default {
    data() {
        imageStyles:{
            width:64,
            height:64,
            border:{
                color:"#ff5a5f",
                width:2,
                style:'dashed',
                radius:'2px'
            }
        },
        listStyles:{
            // 是否显示边框
            border: true,
            // 是否显示分隔线
            dividline: true,
            // 线条样式
            borderStyle: {
                width:1,
                color:'blue',
                radius:2
            }
        }
    }
  }
</script>

使用插槽

使用默认插槽可以自定义选择文件按钮样式

<hr-file-picker v-model="value" file-mediatype="all">
  <button>选择文件</button>
</hr-file-picker>

API

FilePicker Props

属性名	类型	默认值	可选值	说明
v-model/value	Array\Object	-	-	组件数据，通常用来回显 ,类型由`return-type`属性决定，格式见下文
disabled	Boolean	false	-	组件禁用
readonly	Boolean	false	-	组件只读，不可选择，不显示进度，不显示删除按钮
return-type	String	array	array/object	限制 `value` 格式，当为 `object` 时，组件只能单选，且会覆盖
disable-preview	Boolean	false	-	禁用图片预览，仅 `mode:grid`生效
del-icon	Boolean	true	-	是否显示删除按钮
auto-upload	Boolean	true	-	是否自动上传，值为`false`则只触发@select,可自行上传
limit	Number\String	9	-	最大选择个数，h5 会自动忽略多选的部分
title	String	-	-	组件标题，右侧显示上传计数
mode	String	list	list/grid	选择文件后的文件列表样式
file-mediatype	String	image	image/video/all	选择文件类型,all 只支持 H5 和微信小程序平台
file-extname	Array\String	-	-	选择文件后缀，字符串的情况下需要用逗号分隔（推荐使用字符串），根据 `file-mediatype` 属性而不同
list-styles	Object	-	-	`mode:list` 时的样式
image-styles	Object	-	-	`mode:grid` 时的样式
sizeType	Array	['original', 'compressed']	'original', 'compressed'	original 原图，compressed 压缩图，默认二者都有
sourceType	Array	['album', 'camera']	'album', 'camera'	album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

value 格式

三个属性必填，否则影响组件显示

[
  {
    "name": "file.txt",
    "extname": "txt",
    "url": "https://xxxx"
    // ...
  }
]

list-styles 格式

{
  "borderStyle": {
    "color": "#eee", // 边框颜色
    "width": "1px", // 边框宽度
    "style": "solid", // 边框样式
    "radius": "5px" // 边框圆角，不支持百分比
  },
  "border": false, // 是否显示边框
  "dividline": true // 是否显示分隔线
}

image-styles 格式

{
  "height": 60, // 边框高度
  "width": 60, // 边框宽度
  "border": {
    // 如果为 Boolean 值，可以控制边框显示与否
    "color": "#eee", // 边框颜色
    "width": "1px", // 边框宽度
    "style": "solid", // 边框样式
    "radius": "50%" // 边框圆角，支持百分比
  }
}

FilePicker Events

事件称名	说明	返回值
@select	选择文件后触发	见下文
@progress	文件上传时触发	见下文
@success	上传成功触发	见下文
@fail	上传失败触发	见下文
@delete	文件从列表移除时触发	见下文

Callback Params

**注意**：如果绑定的是腾讯云的服务空间，tempFilePaths 将返回 fileID

{
    "progress"          : Number,       // 上传进度 ，仅 @progress 事件包含此字段
    "index"             : Number,       // 上传文件索引 ，仅 @progress 事件包含此字段
    "tempFile"          : file,         // 当前文件对象 ，包含文件流，文件大小，文件名称等，仅 @progress 事件包含此字段
    "tempFiles"         : files,        // 文件列表,包含文件流，文件大小，文件名称等
    "tempFilePaths"     : filePaths,    // 文件地址列表，@sucess 事件为上传后的线上文件地址
}

FilePicker Methods

通过 $ref 调用

方法称名	说明	参数
upload()	手动上传，如`autoUpload`为`false` ，必须调用此方法	-
clearFiles(index:Number)	清除选择结果	传入 Number 为删除指定下标的文件，不传为删除所有

FilePicker Slots

插槽可定义上传按钮显示样式

插槽名	说明
default	默认插槽

示例

::: warning 注意示例依赖了 uni-card uni-section uni-scss 等多个组件，直接拷贝示例代码将无法正常运行。

请到组件下载页面，在页面右侧选择 使用 HBuilderX导入示例项目 ，体验完整组件示例。 :::

::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/file-picker/file-picker

Template

<template>
  <view class="container">
    <uni-card :is-shadow="false" is-full>
      <text class="uni-h6"
        >文件选择上传组件，可以选择图片、视频等任意文件并上传到当前绑定的服务空间。</text
      >
    </uni-card>
    <uni-section title="只选择图片" type="line">
      <view class="example-body">
        <hr-file-picker limit="9" title="最多选择9张图片"></hr-file-picker>
      </view>
    </uni-section>
    <uni-section title="只选择视频" type="line">
      <view class="example-body">
        <hr-file-picker
          limit="9"
          file-mediatype="video"
          title="最多选择9个视频"
        ></hr-file-picker>
      </view>
    </uni-section>

    <!-- #ifdef H5 || MP-WEIXIN -->
    <uni-section title="选择任意文件" type="line">
      <view class="example-body">
        <hr-file-picker
          limit="5"
          file-mediatype="all"
          title="最多选择5个文件"
        ></hr-file-picker>
      </view>
    </uni-section>
    <!-- #endif -->

    <uni-section title="自定义图片大小" type="line">
      <view class="example-body custom-image-box">
        <text class="text">选择头像</text>
        <hr-file-picker
          limit="1"
          :del-icon="false"
          disable-preview
          :imageStyles="imageStyles"
          file-mediatype="image"
          >选择</hr-file-picker
        >
      </view>
    </uni-section>

    <uni-section title="自定义图片大小" type="line">
      <view class="example-body ">
        <hr-file-picker
          readonly
          :value="fileLists"
          :imageStyles="imageStyles"
          file-mediatype="image"
        >
        </hr-file-picker>
        <hr-file-picker
          readonly
          :value="fileLists"
          :listStyles="listStyles"
          file-mediatype="all"
        >
        </hr-file-picker>
      </view>
    </uni-section>
  </view>
</template>

Script

<script>
  export default {
    data() {
      return {
        imageStyles: {
          width: 64,
          height: 64,
          border: {
            radius: "50%",
          },
        },
        listStyles: {
          // 是否显示边框
          border: true,
          // 是否显示分隔线
          dividline: true,
          // 线条样式
          borderStyle: {
            width: 1,
            color: "blue",
            style: "dashed",
            radius: 2,
          },
        },
        fileLists: [
          {
            url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg",
            extname: "png",
            name: "shuijiao.png",
          },
          {
            url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg",
            extname: "png",
            name: "uniapp-logo.png",
          },
          {
            url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg",
            extname: "png",
            name: "shuijiao.png",
          },
        ],
      };
    },
    methods: {},
  };
</script>

Style

<style lang="scss">
  .example-body {
    padding: 10px;
    padding-top: 0;
  }

  .custom-image-box {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
    color: #333;
  }
</style>

:::

hr-file-picker file-picker 图片上传 视频上传 文件上传

更新记录

1.0.6（2024-11-03）下载此版本

1.0.5（2024-11-02）下载此版本

1.0.4（2024-11-02）下载此版本

平台兼容性

介绍

基础用法

选择指定后缀图片，且限制选择个数

手动上传

单选图片且点击再次选择

自定义样式

使用插槽

API

FilePicker Props

value 格式

list-styles 格式

image-styles 格式

FilePicker Events

Callback Params

FilePicker Methods

FilePicker Slots

示例

隐私、权限声明

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

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

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

许可协议

MIT协议

hr-persist-track

hr-keep-alive

hr-datetime-picker

hr-getLocation-amap

hr-grid-swiper

hr-file-picker file-picker 图片上传 视频上传 文件上传

更新记录

1.0.6（2024-11-03） 下载此版本

1.0.5（2024-11-02） 下载此版本

1.0.4（2024-11-02） 下载此版本

平台兼容性

介绍

基础用法

选择指定后缀图片，且限制选择个数

手动上传

单选图片且点击再次选择

自定义样式

使用插槽

API

FilePicker Props

value 格式

list-styles 格式

image-styles 格式

FilePicker Events

Callback Params

FilePicker Methods

FilePicker Slots

示例

隐私、权限声明

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

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

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

许可协议

MIT协议

hr-persist-track

hr-keep-alive

hr-datetime-picker

hr-getLocation-amap

hr-grid-swiper

Modal title

hr-file-picker file-picker 图片上传视频上传文件上传

1.0.6（2024-11-03）下载此版本

1.0.5（2024-11-02）下载此版本

1.0.4（2024-11-02）下载此版本