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