element上传多个图片

在vue中图给出的图片上传例子其实都是上传完后自动提交,博主在写的时候遇到了很多坑。
element上传多个图片

1、先说下element中图片上传的一些要点

1、想要实现多图片上传一定要标注multiple属性、而且一定要是自己手动实现上传功能、这里有两个方法:
(1)利用默认element提供的方法this.$refs.upload.submit()
(2)重写http-request=""方法
注意: 上面两种方法,使用方式是一样的,都是自己封装好一个FormData,然后调用axios,而且axios传递数据一定是data:yourData样式的,千万不要自讨苦吃这样写query:youData

2、element图片组件是默认上传的,添加属性auto-upload="false"后才能关闭。也只有关闭了自动提交后、才能实现手动提交

3、element图片组件自动上传如果没有手动封装FormData数据然后调用axios,即使添加了multiple属性可以上传多个,element图片组件只会是一个图片发送一个请求的,而并非是一个请求多个图片

4、调用this.$refs.upload.submit(),element图片组件会使用默认的上传方式上传文件 如果重写了http-reques方法,那么久会调用http-reques方法

5、如果想要一个请求上传多个图片并附带参数、只能使用formData.append("你的属性名",属性值)的方式,使用formData.append("实体类名",this.form)是无法成功传数据的

6、关闭自动上传后调用this.$refs.upload.submit()才能生效,默认上传请求url都会是element图片组件上绑定的action,关闭的自动上传的都是自己调用axios上传的

2、推荐博文

element多图片上传 https://www.jianshu.com/p/83a9e95dc54a?utm_campaign=haruki