更新记录

1.0.2（2026-06-10） 下载此版本

修复部分bug

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

增加APP文件上传时选择类型提示

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

通用上传组件。支持APP文件选择（png，jpg，pdf，doc等）同时兼容H5，小程序等

平台兼容性

uni-app(5.12)

uni-app x(5.12)

其他

core-upload (文件上传组件)

🎯 核心特性

• UI 与逻辑彻底解耦：使用 Vue3 作用域插槽 (Scope Slot) 进行 UI 控制，如果不传插槽，默认提供极简的回显和上传按钮。
• 是匹配所有平台：APP + H5 + 小程序

💻 基本用法

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

通过 #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>

3. 完全手动控制上传 (复杂业务逻辑)

当你的业务有极其复杂的上传流程（如需要先算 MD5、处理秒传逻辑、或者分片上传）时，可以关闭自动上传，通过监听 @change 手动接管。

<template>
  <core-upload v-model="fileList" :autoUpload="false" @change="onChange">
    <!-- 这里同样可以像上面一样完全自定义 UI -->
  </core-upload>
</template>

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

const fileList = ref([]);

const onChange = (newList) => {
  // 找出刚刚由 core-upload 加入队列，状态为 pending 的新文件
  const pendingFiles = newList.filter((f) => f.status === "pending");

  pendingFiles.forEach(async (file) => {
    // 1. 手动标记为上传中，UI 也会跟着转圈圈
    file.status = "uploading";

    // 2. 走你自己的复杂上传逻辑 (比如 uni.uploadFile 或者云储存 SDK)
    try {
      const res = await myCustomUploadLogic(file.url);
      file.status = "success";
      file.url = res.serverUrl; // 回填服务器地址
    } catch (err) {
      file.status = "failed";
    }
  });
};
</script>

🛠 参数说明 (Props)

⚡ 事件说明 (Events)

🔧 Expose 暴露方法

如果希望在外部利用 ref使用：

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