说明

拖拽式文件上传组件，主要用于图片上传到对象存储服务（如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 提示信息插槽，显示在上传区域下方

使用示例

基本使用 

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

带参数使用 

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

使用插槽自定义内容 

      <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>

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://vp.xiaoying.org.cn/pages/222118/

最后更新于 2025-09-30 20:31 history