精通Upload组件，轻松实现文件上传

2023-10-15 04:39:21

深入剖析Element UI的Upload组件

在前端开发中，文件上传是一个常见的需求。Element UI提供了强大的Upload组件，可以轻松实现文件上传功能。在本文中，我们将对Upload组件进行深入剖析，帮助您掌握它的使用方法和配置技巧。

1. 掌握基本用法

1.1 HTML部分

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
>
  <i class="el-icon-plus"></i>
</el-upload>

1.2 属性解析

属性	说明	默认值
action	文件上传的地址	-
list-type	上传列表的类型	text
multiple	是否允许多文件上传	false
accept	允许上传的文件类型	*
size	单个文件大小限制，单位为字节	209715200
show-file-list	是否显示文件列表	true

2. 扩展配置

除了基本用法之外，您还可以通过配置来扩展Upload组件的功能。

2.1 自定义文件列表

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :file-list="fileList"
>
  <i class="el-icon-plus"></i>
</el-upload>

data() {
  return {
    fileList: [],
  };
},

2.2 限制文件大小

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :max-size="209715200"
>
  <i class="el-icon-plus"></i>
</el-upload>

2.3 限制文件类型

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :accept="accept"
>
  <i class="el-icon-plus"></i>
</el-upload>

data() {
  return {
    accept: 'image/*',
  };
},

3. 扩展应用场景

3.1 拖拽上传

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

3.2 图片列表

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :file-list="fileList"
>
  <i class="el-icon-plus"></i>
</el-upload>

data() {
  return {
    fileList: [{
      name: 'food.jpeg',
      url: 'https://fuss10.elemecdn.com/3/63/4e7833c626e895864143821968715jpeg.jpeg'
    }, {
      name: 'phone.png',
      url: 'https://fuss10.elemecdn.com/a/61/9d0bb32977a38414405e7a045882ajpeg.jpeg'
    }],
  };
},