---
date: 2025-03-25 00:27:21
title: uploadCos使用
permalink: /pages/222118
tags:
  - vue组件
author:
  name: 华总
  link: https://xiaoying.org.cn
categories:
  - 使用指南

---





## 说明

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

## 参数

| 属性名        | 类型          | 必填 | 默认值        | 说明                                         |
| ------------- | ------------- | ---- |------------|--------------------------------------------|
| `uploadFileApi` | `Function`      | 是   | -          | 上传文件的API函数                                 |
| `modelValue`    | `String`        | 否   | ""         | 图片URL，支持v-model双向绑定                        |
| `maxFileSize`   | `Number`        | 否   | 10         | 单个文件上传大小限制（单位：MB）                          |
| `accept`        | `String`        | 否   | "*"        | 允许上传的文件类型                 |
| `dataPath`      | `Array<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>
```