ElementUIupload上传文件的使用
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('文件过大')
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhkiefj
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22