vupload-cos

File upload component based on ant design vue, which can be used to upload to COS

基于vue3和ant-design-vue的腾讯云对象存储COS上传文件组件。该组件主要服务于文件上传功能，上传文件前发送文件信息给后台，后台计算获得文件上传至COS的地址返回组件，组件再根据远程地址将文件进行推送，可用于业务无关的文件上传服务

安装

npm i vupload-cos -S

Tip: 需要提前安装vue，ant-design-vue和axios

使用

<template>
  <cos-upload 
    :fetch-upload-url="fetchUploadUrl" 
    @success="handleSuccessUpload"
    @fail="handleFailUpload"
  />
</template>
<script setup lang="ts">
import CosUpload from "vupload-cos";

const fetchUploadUrl = async (file: File) => {
    // 根据自身逻辑处理文件，并向后台获取cos上传的url和文件对应的id
    const { url, guid } = await getFileUploadUrl(file);

    return { url, id: guid }    // 最后必须返回url和id
};
const handleSuccessUpload = (guid: string) => {}
const handleFailUpload = (guid: string) => {}
</script>

参数

参数	类型	是否必传	默认值	备注
fetchUploadUrl	(file: File) => Promise<UploadInfo>	true	-	-
acceptSuffix	string[]	false	[".png", ".jpg", "ppt", "mp4", ".jpeg", ".mp3"]	允许的后缀
maxSize	number	false	524288000	文件最大字节数
checkFile	(file: File) => boolean	fase	-	若不传该参数，则仅对文件做大小和后缀校验；返回值true为通过校验，false为不通过校验，不会进行文件上传
notification	boolean	false	true	内置文件校验不通过时是否通过message进行通知

其中UploadInfo的类型如下：

interface UploadInfo {
  url: string;
  id: string | number;
}

组件内置的校验包括文件大小和后缀，若要实现更多功能请使用checkFile函数

事件

事件名	类型	备注
success	(id: sring) => void	文件成功上传回调
fail	(id: sring) => void	文件上传失败回调
error	(err: Error) => void	文件上传过程发生的错误回调