element之el-upload上传excel文件

前言:

el-upload是一个封装好了的input type:file的上传组件,这个组件封装的非常好,从选择文件到上传封装了一套钩子函数,可以监听他选择文件之前到上传文件之后的事件,我们可以在对应的钩子函数里面进行操作;

需求:

1.点击导入题库出现弹框

2.弹框包含多选题目类型,上传文件功能(选择文件完成出现文件信息,点击右上角"x"可以取消上传此文件)

3.导入excel文件(点击“a”标签下载模板)

具体实现

具体代码

实现:

accept: 可过滤文件信息,选择文件默认只能选择.xls文件

action:为请求服务器的地址,就点击上传选择文件就会直接调用这个方法把文件传过去;

data:附带默认参数,对象的形式

:file-list:文件列表信息,可多个文件显示

multiple:设置是否可多选

limit:设置具体几张

http-request:覆盖默认上传行为,自定义上传(在这里我用的是自定义上传,他封装的这个需要与服务器把具体对接好,不然接收不到文件)

solt=tip:封装的solt插槽,就是选择文件下方的小提示,我这里是让其点击下载模板;


下拉选项的方法及选择文件的方法

1.下拉选项选择的时候拿到他的id[1,2,3],通过join()方法将其转换为后台需要的格式1,2,3

2.http-request的方法,在这里选择完文件就可以直接上传,但由于我是要携带下拉选择的参数,所以这边我只是拿到他的文件名,通过点击确认的时候在调用后台接口,将数据发送给后台


提交文件

1点击确认时先判断他是否存在需要的两个参数,如果为空则给出提示

2.当都不为空时调用后台接口,创建一个FormData对象。通过append()方法将参数加进去

3.如果请求成功才关闭弹窗,并给出提示(error已去掉...)

4.失败则抛出服务器给出的异常,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。