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)