前言:
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.失败则抛出服务器给出的异常,