关于iView和element上传控件的问题

        因为项目需要进行上传文件的功能,于是打算使用现有的框架iview和element提供的upload控件进行实现。经实测iview的上传功能无法使用,而element的上传控件能够正常使用,这里是指绑定控件的action和name后,控件能够正常的选择文件,并根据接口将文件上传到指定位置。具体原因我会在弄清楚后进行补充。下面是功能代码:

关于iView和element上传控件的问题_第1张图片
element的upload控件使用

下面来对控件的使用进行一下归纳,其实上传文件功能实现真的很简单!

首先最基本的文件上传:

关于iView和element上传控件的问题_第2张图片

按照组件的定义,对action和name做绑定,这里action是指后端提供的上传文件的接口,name是接口定义时绑定file的一个key值,我在这里展示postman的调用,url即是action,key即是name,方便读者能够做对应:

关于iView和element上传控件的问题_第3张图片

当需要对上传文件的结果做处理的时候,组件提供了上传成功和失败的回调接口on-success和on-error,用户需要去对这两个接口绑定回调函数,当绑定成功后即可正确对上传的结果做处理,使用如下:


调用结果:

关于iView和element上传控件的问题_第4张图片

如果想实现用户手动上传,可以将组件的auto-upload改为false


之后在设置一个事件去触发上传,这需要绑定upload这个组件的对象获取到文件的数据


更多的我会在以后补充,目前只用到这么几种功能需求。

你可能感兴趣的:(关于iView和element上传控件的问题)