Element-plus upload带参数上传图片

前言

技术栈：Vue3 + Ts + Element-plus

一、需求描述

除了将图片上传到后端的指定接口，还需要在上传时携带后端规定的参数

二、详细使用

/src/components/Upload/index.vue 全量代码如下

<script lang="ts" setup>
import {
    
     ref } from 'vue'
import {
    
     ElMessageBox, type ElUpload } from 'element-plus'
import {
    
     fetchUploadImage } from '@/api/upload'
import {
    
     CirclePlus } from '@element-plus/icons-vue'

// 文件上传前触发-限制上图图片的大小和格式
const handleBeforeUpload = (file: any) => {
    
    
  // 拿到文件后缀名
  const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
  const isJpg = fileType === 'jpg'
  const isPng = fileType === 'png'
  const isJpeg = fileType === 'jpeg'
  // 根据后缀名判断文件类型
  if (!isJpg && !isPng && !isJpeg) {
    
    
    alert('只能上传图片和pdf格式的文件！')
    return false
  }
  const isLt1M = file.size / 1024 / 1024 < 2
  // 可以限制图片的大小
  if (!isLt1M) {
    
    
    alert('上传图片大小不能超过 2MB!')
  }
  return isJpg || isPng || isJpeg
}

// 文件超出上传限制 此方法是和:limit绑定的
const handleExceed = () => {
    
    
  ElMessageBox.alert('只能上传一个文件，如有需要请删除上一个文件再进行上传', '温馨提示', {
    
    
    confirmButtonText: '确定'
  })
}

// 获取 upload 组件ref
const uploadRef = ref<ComponentRef<typeof ElUpload>>()
const imgUrl = ref('null')
// 事件
const emit = defineEmits(['uploadImageSucceeded'])
// 上传文件方法
const uploadImage = async (file: any) => {
    
    
  const formData = new FormData()
  const flag = props.flag
  formData.append('file', file.file)            // 根据后端文档，我需要传递file 和 flag 两个参数
  formData.append('flag', flag.toString())      // 根据后端文档，我需要传递file 和 flag 两个参数
  const res = await fetchUploadImage(formData)  // 调用接口，将我们准备好的参数传递过去
  imgUrl.value = res.data
  clearFiles()
}

// 触发清空上传列表事件
const clearFiles = () => {
    
    
  // 清空已上传的文件列表（该方法不支持在 before-upload 中调用）
  uploadRef.value?.clearFiles()
}

// 将清空方法暴露出去，供父组件调用
defineExpose({
    
    
  clearFiles
})
</script>
<template>
  <div class="file-upload">
    <el-upload
      ref="uploadRef"
      accept="image/jpg,image/jpeg,image/png"
      action=""
      :before-upload="handleBeforeUpload"
      :limit="1"
      :http-request="uploadImage"
      :show-file-list="false"
      :auto-upload="true"
      :on-exceed="handleExceed"
      name="file"
    >
      <el-icon class="avatar-uploader-icon">
        <CirclePlus />
      </el-icon>
      <div class="upload-text">点击上传</div>
    </el-upload>
  </div>
</template>