element-ui怎么多图上传

 时间:2024-10-23 02:24:53

1、这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的。实现多图上传主要用到以下两个属性:

element-ui怎么多图上传

2、Elemet-ui是自带多图上传的,但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入,有截图可以看出,实质是进行多次请求:

element-ui怎么多图上传

3、前台代码:

element-ui怎么多图上传

4、在组件标签上设置:auto-upload="false"阻止自动上传为手动上传修改:http-request="uploadFile"覆盖组件的默认上传方法

element-ui怎么多图上传
element-ui怎么多图上传

5、注意uploadFile()方法,这是我们覆盖的上传方法。我猜测在我们触发开始上传文件事件(this.$refs.upload.submit())后,组件会遍历当前文件列表的的文件,并调用上传(uploadFile())方法,在(uploadFile())方法里会传入一个file参数:

element-ui怎么多图上传

6、红色方框就是我们要的每个file文件。现在思路清晰了,只要在每次调用uploadFile()方法里把遍历到的文件append()到FormData里面,然后再在上传按钮的事件里将“装载”好的FormData对象作为参数发送到服务端就好了,表单数据也是一样的append操作,下面是后台的java代码:

element-ui怎么多图上传

7、可以看到后台拿到了我们传上去的三张图:

element-ui怎么多图上传
  • jmeter-几个有用的控制器
  • PL/SQL Developer绿色快速安装使用(图文教程)
  • PHP教程 array_sum()函数的使用
  • java 如何将指定的html作为邮件正文发送
  • image对象如何使用complete属性?
  • 热门搜索
    清明节手抄报花边 我爱红领巾手抄报 数学家的故事手抄报 中国梦我的梦手抄报内容 数学手抄报四年级下册 校园手抄报图片 我运动我快乐手抄报 中秋节手抄报花边 三年级国庆节手抄报 反对邪教崇尚科学手抄报