element UI el-upload上传组件使用

最新推荐文章于 2025-11-30 10:29:09 发布

原创最新推荐文章于 2025-11-30 10:29:09 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #elementui

elementUI 专栏收录该内容

8 篇文章

订阅专栏

这篇博客记录了如何使用Element UI组件库中的el-upload实现文件上传功能，特别是配置了拖拽上传、文件类型限制、数量限制及上传成功和失败的回调处理。通过设置属性如`action`、`accept`、`limit`、`on-success`和`on-error`等，实现了单文件上传并控制了上传过程。此外，还展示了处理文件超出限制和清除文件的函数。

项目场景：

最近在项目中遇到了需要上传文件的地方，第一次用，此处作为学习的记录，有不足望指正

描述：

el-upload的方法名和属性请参照element官方文档，这里只贴我使用的一些

我使用的样式是可拖拽上传
在这里插入图片描述

代码如下：

<el-upload
  ref="myUpload"                                     上传文件的名字
  name="file"
  class="upload-demo"
  drag                                               允许拖拽（不写默认false）
  action="/XXXXXXX"                                  上传的地址
  accept=".xls,.XLS,.xlsx,.XLSX,.csv,.CSV"           允许上传的文件格式，可以自定义
  multiple="false"                                   是否支持多选文件
  limit="1"                                          允许上传的文件个数（此处可结合上一个属性）
  :auto-upload="false"                               是否自动上传（此处为了效果选择false）
  :on-exceed="handleExceed"                          文件超出个数限制时的钩子（可在此设置提示）
  :on-success="handleSuccess"                        文件上传成功时的钩子
  :on-error="handleError"                            文件上传失败时的钩子
  :data="ruleForm"                                   上传时附带的额外参数
 >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传xls，xlsx，csv文件</div>
</el-upload>

要注意的是文件上传的方式是表单上传，所以参数的格式不是JSON，而是multipart/form-data

下面是我用到的一些钩子函数

//文件超出限制时
handleExceed() {
   this.$message.warning('当前只允许选择 1 个文件！')
},

// 移除文件
clearFiles() {
   this.$refs['myUpload'].clearFiles()
},

// 弹窗中的新增
employee() {
    this.$refs['myUpload'].submit()
},

// 文件上传成功时
handleSuccess(res) {
  this.$message.success('上传成功！')
  // 可以写一些其他操作，例如刷新页面
},

// 文件上传失败时
handleError(res) {
  this.$message.error('<错误的提示>')
}