vue-upload-cos

🗂 一个基于 Vue 3 + 腾讯云 COS 的文件上传组件，支持分片上传、自动获取临时凭证、文件大小格式化、多文件选择等。

特性

• ✅ 支持多文件上传
• ✅ 自动获取 COS 上传凭证
• ✅ 提供插槽自定义上传按钮与文件展示列表
• ✅ 上传成功后自动记录文件
• ✅ 可以全局注册引入

📦 安装

npm i uploadcos-jiniu
# 或者
yarn add uploadcos-jiniu

Props 参数

1. appChanneId 应用 ID，用于后端鉴权(cos上传必填)
2. multiple 是否支持多选上传 (非必填),默认多选
3. accept 文件类型限制 (非必填)，默认接受任何类型
4. baseUrl 接口域名(cos上传必填)
5. limit 文件数量限制 (非必填)
6. overLoaderList 已上传的文件列表，可以和limit搭配使用，用于限制上传数量 (非必填)
7. isUseCos 是否使用腾讯cos上传图片（必填），默认true
8. defaultUploadConfig 默认上传配置，直传时使用（即不使用cos上传）下面有参数说明
9. appName 产品名称 用来组装文件名 cos上传时使用
10. fileType 文件类型，直传时使用,默认值file

Props中defaultUploadConfig说明

// 采用直传的时候需要传信息
defaultUploadConfig = {
  token: '直传token',
  yyid: '直传yyid'
  appChannelId: '直传appChannelId'
  dataChannelId: '直传dataChannelId'
  uploadUrl: '直传地址'，//例如  '/api/xxx/xxx'
}

插槽

1. upload-button 自定义上传按钮
2. file-list 自定义文件列表

emit 事件

1. uploadfiles 上传成功后触发，返回上传结果 （信息包含： 文件地址，文件名称，以及文件大小）

cos上传结果格式（每个文件）

// cos上传方式返回信息如下
{
  "url": "https://xxx.cos.cn/file.jpg",
  "name": "file.jpg",
  "origin_name": "file.jpg",
  "size": 102400, // 单位 byte
  "ext"   : "jpg", // 文件格式
  "width": 100,
  "height": 100,
  "path": ""
}
// 如果是直传，则直接返回上传接口的所有数据

使用

1. 注册组件，全局注册或者局部注册都可以

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import UploadCos from 'vue-upload-cos'

const app = createApp(App)
app.use(UploadCos)
app.mount('#app')

局部注册

import { defineComponent } from 'vue'
import UploadCos from 'vue-upload-cos'

export default defineComponent({
  components: {
    UploadCos
  }
})

2. 组件使用示例

<template>
  // cos上传
  <UploadCos :appChanneId="123" :multiple="true" :baseUrl="'https://xxx.com'" @uploadfiles="handleUploadFiles">
    <!-- 自定义上传按钮 -->
    <template #upload-button="{ triggerUpload }">
      <div class="upload-box" @click="triggerUpload()">
        <span>📁 点击选择文件</span>
      </div>
    </template>

    <!-- 自定义文件列表 -->
    <template #file-list="{ files }">
      <ul>
        <li v-for="file in files" :key="file.url">
          {{ file.name }} - {{ file.formattedSize }}
        </li>
      </ul>
    </template>
  </UploadCos>
  // api直传
  <UploadCos :defaultUploadConfig="defaultUploadConfig" :isUseCos="false" @uploadfiles="handleUploadFiles">
    <!-- 自定义上传按钮 -->
    <template #upload-button="{ triggerUpload }">
      <div class="upload-box" @click="triggerUpload()">
        <span>📁 点击选择文件</span>
      </div>
    </template>

    <!-- 自定义文件列表 -->
    <template #file-list="{ files }">
      <ul>
        <li v-for="file in files" :key="file.url">
          {{ file.name }} - {{ file.formattedSize }}
        </li>
      </ul>
    </template>
  </UploadCos>
  
</template>

<script setup>
// 上传成功返回
const handleUploadFiles = (data) => {
  console.log('上传成功',data)
}
</script>

更新日志

1.0.2 支持ts识别 1.0.4 更新md 1.0.5 修复文件列表展示问题 1.0.6 修复上传文件列表展示问题 1.0.8 增加limit限制上传数量 1.1.3 暴露上传方法handleSingleFileUpload ，让父组件可以手动上传文件 1.1.4 错误事件抛出 1.2.8 文件限制超限时，抛出事件 1.3.0 上传成功后返回得文件对象添加path 1.3.2 获取图片宽和高 1.3.3 限制小于0的文件 1.3.6 添加默认提示&appName产品名称 1.3.9 增加api直传