文件 useFiles

更新: 2025/1/20 字数: 0 字 时长: 0 分钟

基础使用

useFiles 获取手机文件管理权限并选择或者下载文件。

选择本地文件

selectLocalDocument 用于选择本地文件，接收一个对象参数，包括 limit（选择文件数量）、allowedExtensions（接受的文件类型）。

import useFiles from "@/hooks/useCamera";
const { selectLocalDocument } = useFiles();

点击查看示例代码

<van-button
  type="primary"
  size="small"
  @click="selectLocalDocument({limit: 3, allowedExtensions: ['jpg', 'png']})"
>
  选择本地文件
</van-button>

打开文件

openFile 用于打开文件，接收一个文件路径参数，这个参数从调用 selectLocalDocument 后的fileResult 返回。

import useFiles from "@/hooks/useCamera";
const { fileResult, selectLocalDocument, openFile } = useFiles();

点击查看示例代码

<script setup lang="ts">
import useFiles from "@/hooks/useFiles";

const { fileResult, selectLocalDocument, downloadFile, openFile } = useFiles();

</script>

<template>
  <div class="p-16">
    <div class="py-10">文件</div>
    <van-space wrap>
      <van-button
        type="primary"
        size="small"
        @click="
          selectLocalDocument({
            limit: 2,
            allowedExtensions: ['jpg', 'doc', 'mp3'],
          })
        "
      >
        选择本地文件
      </van-button>
    </van-space>
    <div class="bg-white dark:bg-[--van-background-2]">
      <template v-if="fileResult.length > 0">
        <van-field
          v-for="(item, index) in fileResult"
          :key="item"
          v-model="fileResult[index]"
          rows="1"
          autosize
          readonly
          type="textarea"
          placeholder=""
        >
          <template #button>
            <van-button type="primary" size="small" @click="openFile(item)">
              打开文件
            </van-button>
          </template>
        </van-field>
      </template>
      <VanEmpty
        v-else
        description="点击选择本地文件按钮，获取文件的路径，再点击打开本地文件按钮，打开文件（每次只能打开一个）"
      />
    </div>
  </div>
</template>

下载文件

downloadFile 用于下载文件到本地，需传入文件的下载路径

import useFiles from "@/hooks/useCamera";
const { downloadFile } = useFiles();

点击查看示例代码

<script setup lang="ts">
const link =
  "http://58.221.176.101:9000/otatest/rdzhihuitong_v1.0.21_202412090317_1733995996551.apk";
</script>
<template>
  <van-button type="primary" size="small" @click="downloadFile(link)">
    下载文件
  </van-button>
</template>

API

返回值、方法

返回值、方法	说明	类型
fileResult	选择本地文件的路径，数组base64 格式	Array<string>
selectLocalDocument	选择本地文件，接收一个对象参数，见下表	(obj:selectType) => void
downloadFile	下载文件到本地，接收一个文件下载路径参数	(url:string) => void

类型声明

type selectType = {
  // 最多选择的文件数量
  limit: number;
  // 允许的文件类型
  allowedExtensions: Array<string>;
};