记录一下关于ElementPlus中upload组件上传文件的使用方法
1.添加HTML页面代码
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="/portal/authorizedManage/upload"
:limit="20"
ref="upload"
:file-list="fileList"
:auto-upload="false"
:on-change="onchange"
:on-remove="handleRemove"
>
<el-button type="success" :icon="DocumentAdd">添加附件</el-button>
<template #tip>
<div class="el-upload__tip">
支持office文档、图片格式,单文件上传大小限制10MB,最多上传20个附件
</div>
</template>
</el-upload>
2. 定义上传附件相关的data数据
//上传附件相关
const fileList = ref([])
//fileUploadParams 是根据后台接口重新定义的传给后端的文件数据
const fileUploadParams = reactive({
file: []
})
let fileArr = ref([])
3.定义上传文件、删除文件和文件变化时的函数方法
// 上传函数
const handleUpload = () => {
// 上传文件 reqUploadFile为自定义的接口
reqUploadFile(fileUploadParams)
.then((res) => {
ElMessage.success('文件上传成功')
//拿到后端返回的数据并根据自己的需求进行处理
fileArr.value.push({
fileName: res.data.fileName,
originalFilename: res.data.originalFilename
})
let newArr = fileArr.value.map((item, index) => {
return item.fileName
})
//这个是处理提交后台文件的,将上传的文件用|号隔开
formLabelAlign.contentFile = newArr.join('|')
})
.catch((e) => {
ElMessage.error('文件上传失败')
})
}
//文件改变处理
const onchange = (file) => {
fileUploadParams.file = file.raw
if (file.size / 1024 / 1024 < 100) {
fileList.value.push(file)
handleUpload()
} else {
ElMessage.error('文件过大')
handleRemove(file)
}
}
// 文件删除处理
const handleRemove = (file) => {
fileList.value = fileList.value.filter((f) => file.name !== f.name)
fileArr.value = fileArr.value.filter((f) => {
return file.name !== f.originalFilename
})
let newArr = fileArr.value.map((item, index) => {
return item.fileName
})
formLabelAlign.contentFile = newArr.join('|')
}
4.注释
1. 该方法采用的是单文件上传,与个人业务需求有关,如有需要可以参考官网文件进行配置
2.文件提示运用到了ElementPlus的消息提示ElMessage,如有需要可以引入使用
//引入
import {ElMessage} from 'element-plus'
//使用
ElMessage.success('文件上传成功')
ElMessage.error('文件过大')