更新记录

1.0（2025-09-19） 下载此版本

1.0当前已完成安app、微信小程序功能调试，可以正常运行

平台兼容性

uni-app(3.6.9)

BeiFileLoad 文件上传组件操作说明

一、组件介绍

BeiFileLoad 是一个适用于 UniApp 的跨平台文件上传组件，支持微信小程序、H5、安卓 App 等多端，提供文件选择、类型校验、大小限制、上传进度显示及取消上传等功能，可灵活配置上传参数和回调逻辑。

二、组件引入与基础使用

1. 引入组件

在需要使用的页面中引入组件（以 Vue 单文件为例）：

<template>
  <view>
    <!-- 引入组件并配置参数 -->
    <BeiFileLoad 
      :fileUrl="uploadUrl" 
      :originalObj="bizParams"
      :allowedTypes="['pdf', 'docx', 'jpg', 'png']"
      :maxSizeMB="10"
      @onUploadSuccess="handleSuccess"
      @onUploadError="handleError"
    />
  </view>
</template>

<script>
// 导入组件
import BeiFileLoad from '@/components/BeiFileLoad.vue';

export default {
  components: {
    BeiFileLoad // 注册组件
  },
  data() {
    return {
      uploadUrl: 'https://your-domain.com/api/upload', // 上传接口地址
      bizParams: { token: 'xxx', module: 'file' } // 业务参数
    };
  },
  methods: {
    handleSuccess(result) {
      console.log('上传成功', result);
    },
    handleError(error) {
      console.error('上传失败', error);
    }
  }
};
</script>

三、核心参数配置（Props）

四、操作流程

1. 选择文件

• 点击「选择本地文件」按钮，组件会根据当前平台（微信小程序 / H5 / 安卓 App）调用对应的文件选择器。
• 安卓 App 首次使用时会请求存储权限，需用户授权后方可选择文件。
• 选择成功后，会显示文件名、大小及相关错误提示（如有）。

2. 文件校验

组件会自动进行以下校验：

• 类型校验：若选择的文件扩展名不在 allowedTypes 中，显示 “不支持的附件类型” 提示。
• 大小校验：若文件大小超过 maxSizeMB 限制，显示 “附件大小超过限制” 提示。
• 校验不通过时，「上传附件」按钮会禁用。

3. 上传文件

• 校验通过后，点击「上传附件」按钮开始上传，按钮会显示 “上传中...” 及加载图标。
• 上传过程中显示进度条，实时更新上传进度（0-100%）。

4. 取消上传

• 上传过程中可点击「取消上传」按钮终止上传，组件会重置状态并提示 “已取消上传”。

5. 移除文件

• 未上传或上传完成后，可点击文件信息后的「移除」按钮清除已选文件，重置选择状态。

五、回调函数（Events）

六、多平台适配说明

1. 微信小程序：

   • 需在小程序后台配置上传域名（fileUrl 域名需加入 “uploadFile 合法域名”）。
   • 支持通过 chooseFile 或 chooseMessageFile 选择文件。

2. H5：

   • 依赖浏览器原生文件选择能力，通过 accept 属性限制文件类型。

3. 安卓 App：

   • 基于 plus 原生 API 实现，支持 Android 10 + 的分区存储权限。
   • Android 13 + 需申请媒体文件访问权限，旧版本需申请外部存储读写权限。

七、常见问题处理

1. “文件类型不支持”：检查 allowedTypes 配置是否包含该文件扩展名（注意小写）。
2. “附件过大”：调整 maxSizeMB 参数，或提示用户压缩文件。
3. 微信小程序 “上传域名未配置”：在微信公众平台配置 fileUrl 对应的域名。
4. 安卓 “无存储权限”：引导用户在手机设置中开启应用的存储权限。
5. 上传无响应：检查 fileUrl 是否可访问，后端接口是否正确处理 multipart/form-data 类型请求。

通过以上配置和操作，可快速实现跨平台的文件上传功能，组件会自动处理不同平台的差异和常见异常场景。