当前位置：首页 > 前端教程

elementui file

2026-03-06 02:47:51前端教程

ElementUI File 上传组件使用指南

ElementUI 提供了强大的文件上传组件 el-upload，支持拖拽上传、多文件上传、文件类型限制等功能。

基本用法

引入 el-upload 组件并设置基本属性：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

拖拽上传

启用拖拽功能只需添加 drag 属性：

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>

文件限制

可以通过属性设置文件类型、大小等限制：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :before-upload="beforeUpload"
  accept=".jpg,.jpeg,.png"
  :limit="3"
  :on-exceed="handleExceed">
</el-upload>

自定义上传行为

使用 http-request 覆盖默认上传行为：

<el-upload
  action=""
  :http-request="customUpload">
</el-upload>

methods: {
  customUpload(file) {
    // 自定义上传逻辑
    const formData = new FormData()
    formData.append('file', file)
    axios.post('/upload', formData)
  }
}

文件列表控制

通过 file-list 属性控制已上传文件列表：

elementui file

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :on-change="handleChange">
</el-upload>

常用回调函数

methods: {
  handleRemove(file, fileList) {
    // 文件移除回调
  },
  handlePreview(file) {
    // 文件预览回调
  },
  beforeUpload(file) {
    // 上传前校验
    const isJPG = file.type === 'image/jpeg'
    if (!isJPG) {
      this.$message.error('只能上传JPG格式图片')
    }
    return isJPG
  },
  handleExceed(files, fileList) {
    // 文件超出限制回调
    this.$message.warning(`最多上传3个文件`)
  }
}