elementUI怎么使用elupload上传文件
更新时间：2023-10-10el-upload是什么
el-upload是一个能够将本地文件上传到服务器的上传组件。它支持多选文件、拖动上传、图片预览等功能。el-upload是基于Vue.js和Element UI开发的，它能够方便地自定义上传属性、样式和上传钩子函数以适合不同的需求。下面将详细介绍如何使用el-upload。
点击上传文件
只能上传不超过 10MB 的文件
el-upload属性
el-upload有多个属性，如action、headers、params、multiple、limit、on-success等。
- action: 必填项，上传的地址，可以是一个字符串或者一个返回字符串的函数。如下例子中的uploadUrl。 - headers: 用户自定义上传的请求头，类型为object。 - params: 用户上传的额外参数，类型为object。 - multiple: 是否支持多文件上传，类型为boolean，默认为false。 - limit: 最大文件数，类型为number，默认为3。 - accept: 可选的文件类型，类型为string。 - on-success: 成功的回调函数，类型为function，包含三个参数：response、file、fileList。 - on-error: 失败的回调函数，类型为function，包含三个参数：error、file、fileList。 - on-progress: 上传进度的回调函数，类型为function，包含三个参数：event、file、fileList。点击上传文件
自定义上传文件列表
el-upload默认提供了一个文件列表展示功能，但是样式和展示缺乏灵活性。el-upload支持通过具名插槽自定义展示上传文件的列表。下面的例子展示了如何通过插槽自定义上传文件列表。
点击上传文件
{{ file.name }}
成功上传
上传失败
自定义上传文件名和文件类型
如果需要自定义上传文件名和文件类型，可以通过传递FormData对象来实现。FormData对象可以用来模拟表单提交，以便上传键和值对。下面的例子展示了如何通过FormData对象自定义上传文件名和文件类型。
点击上传文件
总结
el-upload是一个可以方便地上传本地文件到服务器的Vue.js和Element UI组件。通过一系列的属性和回调函数，我们可以实现自定义上传的地址、上传头、文件名、文件类型、上传文件列表以及上传效果等。对于开发人员而言，掌握el-upload的使用是很有必要的。
