【Vue】插件:二、element-ui 常用事件方法

一、使用el-upload进行文件上传

---

1. 前提

已安装elementUI并正确引入

2. 参数说明

参数	说明
:action	是执行上传动作的后台接口，本文置空采用http-request取而代之拦截请求，进行文件上传
:multiple="true"	设置是否可以同时选中多个文件上传，这个也是的属性
:limit="1"	上传文件数量，设置最多可以上传的文件数量，超出此数量后选择的文件是不会被上传的。
:on-exceed	绑定的方法则是处理文件超出限制数量后的动作
:file-list="fileList"	用于显示已上传文件列表，其中fileList是数组对象，初始为空。

参数	说明
accept="image/jpeg,image/gif,image/png"	限制上传文件的格式

具体可参考HTML5 input file类型，accept（文件类型控制）

• 这个是直接使用一样的属性了，accept属性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等.
• 添加了accept属性仅仅是选择文件时限制格式，其实用户还是可以点选“所有文件”选项，上传其他格式。
• 如果需要在上传时校验文件格式，则需要在:before-upload或on-change这个钩子绑定相应的方法来校验，具体校验方法查看3. 页面中使用中的beforeUpload和handleChange方法

参数	说明
abort	取消上传请求

this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象

参数	说明
slot="tip	用于添加提示如正确的文件格式应该为***，如

请上传图片格式文件

参数	说明
abort	取消上传请求

this.$refs.upload.abort( file);/ /这里的file为fileList 中的 file 对象

其他参数具体参考
elementUI官方API文档>upload

3. 页面中使用

• template

• script

二、input等的change事件中传递自定义参数

---

通过鼠标或键盘输入字符

Input 为受控组件，它总会显示 Vue 绑定值。
通常情况下，应当处理 input 事件，并更新组件的绑定值（或使用v-model）。否则，输入框内显示的值将不会改变。
不支持 v-model 修饰符。

一、无效写法

@change="doSomething(val, index)"

二、有效写法

@change="((val)=>{changeStatus(val, index)})"

---

参考文档网址：
Element el-upload上传组件详解
element-ui之input官方讲解