VUE+Element-ui(el-upload) 上传图片/文件

泡泡日积月累第一篇！

1、文件上传时携带参数

文件上传时,想要在上传的时候携带参数，可直接使用：

:data={参数} ,参数为键值对的形式{key1:value1,key2:value2}

2、upload

• open: 是否显示弹出层，该属性的值为布尔型，false表示不显示，true表示显示。
• title: 弹出层标题，该属性的值为字符串类型。
• updateSupport: 是否更新已经存在的用户数据，该属性的值为整型。若为0，则不更新；若为1，则更新。
• headers: 设置上传的请求头部，该属性的值为一个对象类型，包含了一个Authorization属性，在请求头部中将会添加Authorization属性的值为"Bearer "加上getToken()方法的返回值，此处的返回值就是token（根据自己需求改！）。
• url: 上传的地址，该属性的值为一个字符串类型，值process.env.VUE_APP_BASE_API + "/api/common/upload"。
• 其中，process.env.VUE_APP_BASE_API是一个环境变量，其值在不同的环境中可能会有所不同，表示应用程序的基本API地址。

 4、multiple、limit、on-exceed属性

 给控件加了multiple属性，就表示可以多选；

 通过limit设置多选的个数限制，当不需要多选（只想单选文件）时，不加multiple属性；

 可多选，无个数限制，不设置limit这个属性即可；

 on-exceed：超出限制时会调用此方法；

超出三个文件给予提示信息，如图：

5、before-upload属性以及on-success属性

注意auto-upload属性的坑：:auto-upload="false"时，before-upload 不起作用；

为啥？

before-upload: 文件上传之前触发，指当文件已经被选中，提交时才会触发此事件
auto-upload：设置为false时，选中文件不会触发上传事件

解决方法：

将before-upload里面要写的内容放到on-change事件中去实现

:auto-upload="false"设置为true