ElementUI中upload上传文件的使用

最新推荐文章于 2025-04-02 20:40:08 发布

学习学习再学习高高

最新推荐文章于 2025-04-02 20:40:08 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_46076347/article/details/131638652

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

文章详细介绍了如何在ElementPlus框架中使用upload组件进行文件上传，包括HTML页面代码设置、data数据定义、上传、删除和文件变化的函数方法实现，以及错误提示的处理。文件上传支持限制数量、格式和大小，并能动态更新文件列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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('文件过大')