create-base-teek-theme
Version:
### npm ``` npm create base-teek-theme@latest my-first-blog ```
103 lines (81 loc) • 2.72 kB
Markdown
---
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>
```