更新记录

1.0.1（2026-06-09） 下载此版本

优化样式

1.0.0（2026-06-09） 下载此版本

支持APP文件选择（png，jpg，pdf，doc等）上传

平台兼容性

uni-app(5.12)

uni-app x(5.12)

其他

core-upload (无头上传组件)

一个只专注于 逻辑解耦 的 UniApp 跨端通用上传组件，专为有着高频定制 UI 需求的企业级应用打造。

🎯 核心特性

• UI 与逻辑彻底解耦：使用 Vue3 作用域插槽 (Scope Slot) 进行 UI 控制，如果你不传插槽，默认提供极简的回显和上传按钮。
• 完美的跨端适配：
  • APP 端 内置了 s-file-picker 原生 UTS 逻辑，开箱即用，绕过繁琐的原生权限限制。
  • 小程序端 自动降级为 uni.chooseMedia / uni.chooseMessageFile。
  • H5 端 自动使用 uni.chooseFile。
• 内置上传队列：全自动的网络请求控制与上传状态（进度条、成功、失败）分发，业务侧只需关注 v-model 回显。

💻 基本用法

1. 使用默认 UI (开箱即用)

<template>
  <core-upload
    v-model="fileList"
    action="https://www.example.com/api/upload"
    :headers="{ token: '123' }"
    @success="handleSuccess"
  />
</template>

<script setup>
import { ref } from 'vue';
const fileList = ref([]);
const handleSuccess = ({ file, response }) => {
  console.log('上传成功', response);
};
</script>

2. 深度定制 UI (Headless 核心玩法)

通过 #item 和 #default 插槽完全接管渲染。

<template>
  <core-upload
    v-model="fileList"
    action="https://www.example.com/api/upload"
    accept="image"
  >
    <!-- 1. 定制文件列表展示 -->
    <template #item="{ file, index, deleteItem }">
      <view class="my-custom-file">
        <image :src="file.url" mode="aspectFill"></image>
        <text>进度: {{ file.progress }}%</text>
        <button size="mini" @click="deleteItem">删除</button>
      </view>
    </template>

    <!-- 2. 定制触发上传按钮 -->
    <template #default="{ disabled, triggerPick }">
      <button :disabled="disabled" type="primary" @click="triggerPick">
        点击上传图片
      </button>
    </template>
  </core-upload>
</template>

🛠 参数说明 (Props)

⚡ 事件说明 (Events)

🔧 Expose 暴露方法

如果您希望在外部利用 ref 强行控制行为：

• triggerPick(): 强行主动调起底层设备的文件选择弹窗。
• deleteItem(index): 手动删除指定索引的文件。