Upload上传组件 ，elementUI组件

打开elementUI，找到这个组件

 我们现在来详细解析一下这个

  action就是服务器地址。

具体含义和对应位置

<template>
<!-- Element Plus 文件上传组件 -->
<!-- v-model:file-list="fileList" - 双向绑定已选择的文件列表到组件的fileList属性 -->
<!-- class="upload-demo" - 为组件添加自定义样式类 -->
<!-- action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" - 设置文件上传的目标URL（示例地址，实际使用时需替换为真实接口） -->
<!-- multiple - 允许选择多个文件 -->
<!-- :on-preview="handlePreview" - 当点击文件预览时触发的回调函数 -->
<!-- :on-remove="handleRemove" - 当文件被移除时触发的回调函数 -->
<!-- :before-remove="beforeRemove" - 文件移除前的钩子函数，可用于确认操作 -->
<!-- :limit="3" - 限制最多可上传的文件数量为3个 -->
<!-- :on-exceed="handleExceed" - 当选择的文件数量超过限制时触发的回调函数 -->

  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :limit="3"
    :on-exceed="handleExceed"
  >
    <!-- 自定义上传按钮 -->
    <!-- type="primary" - 使用Element Plus的主色调样式 -->
    <el-button type="primary">Click to upload</el-button>
    <!-- 上传提示信息的插槽（slot）定义 -->
    <!-- <template #tip> - 用于定义上传组件的提示信息区域，#tip 是Element Plus上传组件的预留插槽名 -->
    <template #tip>
     <!-- 提示信息容器，使用el-upload__tip类名保证样式一致性 -->
     <div class="el-upload__tip">
        <!-- 具体提示内容：限制文件类型为jpg/png，大小小于500KB -->
        jpg/png files with a size less than 500KB.
    </div>
    </template>
  </el-upload>
</template>

 

<script lang="ts" setup>
// 导入Vue的ref函数，用于创建响应式引用
import { ref } from 'vue'
// 导入Element Plus的消息提示和确认对话框组件
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入Element Plus上传组件的类型定义
import type { UploadProps, UploadUserFile } from 'element-plus'

// 创建响应式文件列表，初始包含两个示例文件对象
// UploadUserFile[] 表示文件列表的类型，每个文件对象包含name和url属性
const fileList = ref<UploadUserFile[]>([
  {
    name: 'element-plus-logo.svg', // 文件名称
    url: 'https://element-plus.org/images/element-plus-logo.svg', // 文件访问URL
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg',
  },
])

// 定义文件移除事件的处理函数，类型与UploadProps的onRemove一致
// 参数file为被移除的文件对象，uploadFiles为当前上传列表
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  console.log(file, uploadFiles) // 打印被移除文件和当前列表
}

// 定义文件预览事件的处理函数，类型与UploadProps的onPreview一致
// 参数uploadFile为被预览的文件对象
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log(uploadFile) // 打印被预览的文件信息
}

// 定义文件数量超出限制的处理函数，类型与UploadProps的onExceed一致
// 参数files为本次选择的超出限制的文件列表，uploadFiles为已上传的文件列表
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  // 显示警告消息，提示当前选择和总文件数超出限制
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

// 定义文件移除前的确认钩子函数，类型与UploadProps的beforeRemove一致
// 参数uploadFile为即将移除的文件对象，uploadFiles为当前上传列表
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  // 显示确认对话框，用户确认后返回true允许移除，取消则返回false阻止移除
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`
  ).then(
    () => true, // 确认移除
    () => false // 取消移除
  )
}
</script>

接下来我们看看这个

 

 

<template>
  <!-- Element Plus 文件上传组件 -->
  <!-- v-model:file-list="fileList" - 双向绑定文件列表，实时更新已选择的文件 -->
  <!-- class="upload-demo" - 自定义样式类 -->
  <!-- action - 文件上传的目标URL（示例地址，实际使用需替换） -->
  <!-- :on-change="handleChange" - 文件状态改变时触发的回调函数 -->
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :on-change="handleChange"
  >
    <!-- 自定义上传按钮 -->
    <el-button type="primary">Click to upload</el-button>
    
    <!-- 自定义提示信息区域 -->
    <!-- #tip - Element Plus 预留的提示信息插槽 -->
    <!-- 限制文件类型为jpg/png，大小小于500KB -->
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
// 导入Vue的ref函数，用于创建响应式数据
import { ref } from 'vue'
// 导入Element Plus上传组件的类型定义
import type { UploadProps, UploadUserFile } from 'element-plus'

// 定义响应式文件列表，初始包含两个示例文件
// UploadUserFile[] - 文件对象数组类型，包含name（文件名）和url（文件URL）等属性
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food2.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

// 文件状态变化时的回调函数
// uploadFile - 当前操作的文件对象
// uploadFiles - 当前所有已选择的文件列表
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
  // 限制文件列表最多保留3个文件
  // slice(-3) - 截取数组最后3个元素，自动移除最早的文件
  fileList.value = fileList.value.slice(-3)
}
</script>

还有这个拖拽上传

 

 

<template>
  <!-- Element Plus 文件上传组件 -->
  <!-- class="upload-demo" - 应用自定义样式类 -->
  <!-- drag - 启用拖拽上传功能 -->
  <!-- action - 设置文件上传的目标URL（示例地址，实际使用需替换为真实接口） -->
  <!-- multiple - 允许选择多个文件 -->
  <el-upload
    class="upload-demo"
    drag
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    multiple
  >
    <!-- 自定义上传区域内容 -->
    <!-- el-icon - 显示上传图标 -->
    <!-- UploadFilled - Element Plus提供的填充样式上传图标 -->
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    
    <!-- 上传区域提示文本 -->
    <!-- <em> - 强调"click to upload"部分 -->
    <div class="el-upload__text">
      Drop file here or <em>click to upload</em>
    </div>
    
    <!-- 自定义上传提示信息 -->
    <!-- #tip - Element Plus上传组件的提示信息插槽 -->
    <!-- 限制文件类型为jpg/png，大小小于500KB -->
    <template #tip>
      <div class="el-upload__tip">
        jpg/png files with a size less than 500kb
      </div>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
// 导入Element Plus提供的填充样式上传图标
// 用于在上传区域显示视觉引导图标
import { UploadFilled } from '@element-plus/icons-vue'
</script>

 最后还是要看他的属性