前言
技术栈: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
}
const handleExceed = () => {
ElMessageBox.alert('只能上传一个文件,如有需要请删除上一个文件再进行上传', '温馨提示', {
confirmButtonText: '确定'
})
}
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)
formData.append('flag', flag.toString())
const res = await fetchUploadImage(formData)
imgUrl.value = res.data
clearFiles()
}
const clearFiles = () => {
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>