Bootstrap

element el-upload组件方法 传参、联调与封装

一、参数

 (一)必填属性

1、action   必选参数,上传的地址——string

2、headers   设置上传的请求头部——object

3、file-list   上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]——array

如果在<el-upload>标签中不写:fileList属性,不影响上传成功方法,但是在编辑,也就是再打开弹出框的时候,会不显示这个文件信息

 

列表中显示文件信息,是在查询表格时,后端接口会将文件信息传过来

二、函数

1、:before-upload   上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。————function(file)

代码示例:

 

校验函数返回的res,校验函数里面的逻辑,主要是针对File这个对象做处理。

 

2、on-success   文件上传成功时的钩子。——function(response, file, fileList)

使用这个函数后,可以打印出response、file、fileList这些参数,当我们点击上传按钮后,并使用该函数,组件会自动给我们返回这些信息。一般支持多次上传文件的情况,我们都返回fileList信息。

通常我们上传的文件需要和其他内容,一起提交表单发送,这是我们需要知道后端对于文件id接收的数据结构,下面的示例是后端要求以逗号拼接的形式传参。

 上面对fileList进行了格式化处理

3、on-remove   文件列表移除文件时的钩子——function(file, fileList)

 4、on-progress   文件上传时的钩子——function(event, file, fileList)

        可以对进度条做一个控制

 5、on-error   文件上传失败时的钩子——function(err, file, fileList)

;