el-upload详解

el-upload 是 Element Plus 框架中的一个文件上传组件，用于处理文件上传的功能。它可以支持拖拽上传、图片预览等多种功能，适用于多种文件上传场景。

一。el-upload 属性详解

1. action:

   • 类型: String
   • 用途: 必填参数，接收上传文件的接口地址。

2. multiple:

   • 类型: Boolean
   • 用途: 是否支持多选文件。
   • 默认值: false

3. limit:

   • 类型: Number
   • 用途: 最大允许上传的文件数量。

4. on-exceed:

   • 类型: Function
   • 用途: 文件超出个数限制时的钩子函数

5. on-change:

   • 类型: Function
   • 用途: 文件状态改变时的钩子函数。

6. on-preview:

   • 类型: Function
   • 用途: 文件列表中预览文件时的钩子函数。

7. on-remove:

   • 类型: Function
   • 用途: 文件列表中删除文件时的钩子函数。

8. on-success:

   • 类型: Function
   • 用途: 文件上传成功时的钩子函数。

9. on-error:

   • 类型: Function
   • 用途: 文件上传失败时的钩子函数。

10. before-upload:

    • 类型: Function
    • 用途: 上传文件之前的钩子函数。

11. before-remove:

    • 类型: Function
    • 用途: 删除文件之前的钩子函数。

12. auto-upload:

    • 类型: Boolean
    • 用途: 是否在选取文件后立即进行上传。
    • 默认值: true

13. drag:

    • 类型: Boolean
    • 用途: 是否启用拖拽上传。
    • 默认值: false

14. list-type:

    • 类型: String
    • 用途: 文件列表的类型，可选值为 text、picture、picture-card。
    • 默认值: text

15. accept:

    • 类型: String
    • 用途: 接受上传的文件类型。

16. file-list:

    • 类型: Array
    • 用途: 上传的文件列表。
    • 默认值: []

17. http-request:

    • 类型: Function
    • 用途: 自定义上传行为。

18. show-file-list:

    • 类型: Boolean
    • 用途: 是否显示已上传文件列表。
    • 默认值: true

19. disabled:

    • 类型: Boolean
    • 用途: 是否禁用上传。
    • 默认值: false

20. data:

    • 类型: Object
    • 用途: 附加上传请求的额外参数。
    • 默认值: {}

21. name:

    • 类型: String
    • 用途: 设置上传的文件字段名。
    • 默认值: file

22. with-credentials:

    • 类型: Boolean
    • 用途: 支持发送 cookie 凭证信息。
    • 默认值: false

23. headers:

    • 类型: Object
    • 用途: 设置上传的请求头部。
    • 默认值: {}

二。 el-upload 事件详解

1. change:

   • 类型: Function
   • 用途: 文件状态改变时触发的回调函数。
   • 参数: file, fileList

2. preview:

   • 类型: Function
   • 用途: 文件列表中预览文件时触发的回调函数。
   • 参数: file

3. remove:

   • 类型: Function
   • 用途: 文件列表中删除文件时触发的回调函数。
   • 参数: file, fileList

4. success:

   • 类型: Function
   • 用途: 文件上传成功时触发的回调函数。
   • 参数: response, file, fileList

5. error:

   • 类型: Function
   • 用途: 文件上传失败时触发的回调函数。
   • 参数: error, file, fileList

6. exceed:

   • 类型: Function
   • 用途: 文件超出个数限制时触发的回调函数。
   • 参数: files, fileList

三。 el-upload 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义上传按钮的内容。

2. tip:

   • 插槽名称: tip
   • 用途: 显示提示信息。

3. file:

   • 插槽名称: file
   • 用途: 自定义文件列表项的内容。

四。示例代码

<template>
  <div>
    <h2>Upload 示例</h2>

    <!-- 基本用法 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :auto-upload="true"
      :drag="false"
      list-type="text"
      :file-list="fileList"
      :show-file-list="true"
      :disabled="false"
      :data="{ userId: 123 }"
      name="file"
      :with-credentials="false"
      :headers="{ Authorization: 'Bearer token' }"
    >
      <el-button slot="trigger" type="primary">选取文件</el-button>
      <el-button type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>

    <!-- 拖拽上传 -->
    <el-upload
      drag
      action="https://jsonplaceholder.typicode.com/posts/"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :auto-upload="true"
      list-type="picture"
      :file-list="fileList"
      :show-file-list="true"
      :disabled="false"
      :data="{ userId: 123 }"
      name="file"
      :with-credentials="false"
      :headers="{ Authorization: 'Bearer token' }"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
    </el-upload>

    <!-- 图片预览 -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :auto-upload="true"
      :file-list="fileList"
      :show-file-list="true"
      :disabled="false"
      :data="{ userId: 123 }"
      name="file"
      :with-credentials="false"
      :headers="{ Authorization: 'Bearer token' }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 图片预览对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleExceed = (files, fileList) => {
  this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}

const handlePreview = (file) => {
  console.log('文件预览:', file)
}

const handleRemove = (file, fileList) => {
  console.log('文件移除:', file, fileList)
}

const handleSuccess = (response, file, fileList) => {
  console.log('文件上传成功:', response, file, fileList)
}

const handleError = (error, file, fileList) => {
  console.error('文件上传失败:', error, file, fileList)
}

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG && !isPNG) {
    this.$message.error('上传图片只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 2MB!')
  }
  return (isJPG || isPNG) && isLt2M
}

const beforeRemove = (file, fileList) => {
  return this.$confirm(`确定移除 ${file.name}？`)
}

const submitUpload = () => {
  // 手动触发上传
  // 可以在这里调用上传方法
}

const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}
</script>