因为项目需要进行上传文件的功能,于是打算使用现有的框架iview和element提供的upload控件进行实现。经实测iview的上传功能无法使用,而element的上传控件能够正常使用,这里是指绑定控件的action和name后,控件能够正常的选择文件,并根据接口将文件上传到指定位置。具体原因我会在弄清楚后进行补充。下面是功能代码:
element的upload控件使用下面来对控件的使用进行一下归纳,其实上传文件功能实现真的很简单!
首先最基本的文件上传:
按照组件的定义,对action和name做绑定,这里action是指后端提供的上传文件的接口,name是接口定义时绑定file的一个key值,我在这里展示postman的调用,url即是action,key即是name,方便读者能够做对应:
当需要对上传文件的结果做处理的时候,组件提供了上传成功和失败的回调接口on-success和on-error,用户需要去对这两个接口绑定回调函数,当绑定成功后即可正确对上传的结果做处理,使用如下:
调用结果:
如果想实现用户手动上传,可以将组件的auto-upload改为false
之后在设置一个事件去触发上传,这需要绑定upload这个组件的对象获取到文件的数据
更多的我会在以后补充,目前只用到这么几种功能需求。
网友评论