VitePress

Appearance

uploadCos使用 ​

说明 ​

拖拽式文件上传组件，主要用于图片上传到对象存储服务（如COS、OSS等）。

参数 ​

属性名类型必填默认值说明
uploadFileApiFunction是-上传文件的API函数
modelValueString否""图片URL，支持v-model双向绑定
maxFileSizeNumber否10单个文件上传大小限制（单位：MB）
acceptString否"*"允许上传的文件类型
dataPathArray<String>否['data']数据在响应中的路径，如['result','url']表示取response.result.url

插槽 ​

插槽名说明
default默认插槽，可自定义拖拽区域内容
tip 提示信息插槽，显示在上传区域下方

使用示例 ​

基本使用 ​

vue
<upload-cos v-model="imageUrl" :uploadFileApi="uploadToServer" xmlns=""></upload-cos>

带参数使用 ​

vue
<!-- 带参数使用示例 -->
<template>
  <upload-cos
    v-model="imageUrl"
    :uploadFileApi="uploadToServer"
    :maxFileSize="5"
    accept="image/png, image/jpeg"
    :dataPath="['result', 'path']"
  ></upload-cos> <!-- 确保闭合标签 -->
</template>

使用插槽自定义内容 ​

vue
<template>
  <div>
    <upload-cos :uploadFileApi="uploadToServer">
      <!-- 自定义上传区域 -->
      <template #default>
        <div class="custom-upload-area">
          <i class="el-icon-upload"></i>
          <div>点击或拖拽图片到此区域上传</div>
        </div>
      </template>
      
      <!-- 自定义提示信息 -->
      <template #tip>
        <div class="custom-tip">支持jpg、png格式，文件小于5MB</div>
      </template>
    </upload-cos>
  </div>
</template>

<script setup>
// 上传函数示例
function uploadToServer(file: File) {
   const formData = new FormData();
   formData.append("file", file);
   formData.append("biz", "user_avatar");
   return request({
     url: "/api/cos/upload",
     method: "post",
     data: formData,
     headers: {
       "Content-Type": "multipart/form-data",
     },
   });
 }
</script>