@tanzhenxing/zx-uploader v1.0.2

zx-uploader 文件上传组件

zx-uploader 是一个功能强大的文件上传组件，支持 H5、小程序和 APP 端。它提供了丰富的功能，如文件预览、上传状态显示、数量和大小限制、自定义样式等。

特性

• 支持多端：H5、小程序、APP
• 文件预览：支持图片和非图片文件预览
• 上传状态：显示上传中、成功、失败等状态
• 数量限制：可配置最大上传文件数量
• 大小限制：可配置单个文件最大上传大小
• 自定义样式：支持自定义上传按钮和预览区域
• 事件回调：提供丰富的事件回调，如读取后、删除前、超限等
• v-model 支持：可通过 v-model 双向绑定文件列表
• 禁用与只读：支持禁用和只读状态

使用方法

<template>
  <view>
    <zx-uploader
      v-model="fileList"
      @after-read="handleAfterRead"
      @delete="handleDelete"
      :max-count="5"
      :max-size="1024 * 1024 * 2" 
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const fileList = ref([]);

const handleAfterRead = (event) => {
  console.log('文件读取完成:', event.file);
  // 在这里处理文件上传逻辑
  // event.file 是一个包含文件信息的对象或数组
  // 例如：uni.uploadFile({...})
};

const handleDelete = (event) => {
  console.log('文件删除:', event.file, event.index);
  // fileList.value.splice(event.index, 1); // 如果未使用v-model，则需要手动删除
};
</script>

API

Props

File Object 结构

文件列表中的每个文件对象（v-model 或事件回调中）通常包含以下属性：

Events

Slots

注意事项

• 组件本身不包含将文件上传到服务器的逻辑，after-read 事件触发后，您需要自行调用 uni.uploadFile 或其他上传API将文件发送到服务器。
• v-model 绑定的文件列表，其元素的 url 属性是必须的，用于展示预览图。
• 在小程序和 App 端，after-read 返回的文件对象中会包含 tempFilePath，可用于 uni.uploadFile。
• H5 端，after-read 返回的文件对象中会包含原始的 File 对象，可以用于 FormData 上传。

TODO

• 完善多端兼容性测试
• 增加视频预览功能
• 增加文件图标显示，用于非图片类型文件
• 优化性能和体验