前言
技术栈: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>
文章来源地址https://www.toymoban.com/news/detail-522460.html
文章来源:https://www.toymoban.com/news/detail-522460.html
到了这里,关于Element-plus upload带参数上传图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!