VUE el-upload 上传多文件(可批量上传也可以单文件上传)

时间:2024-03-01 10:17:45

一.序言
接触vue时间也不少了,最近用el-upload给后端上传文件,饿了么上传文件api个人感觉 action不是很好用。上传多文件不断报错,经过几天的测试,终于得到了axios上传多文件的方法,记录下,供大家参考

二.步骤
步骤一:找到fileList
在这里插入图片描述

在这里插入图片描述

el-upload里面有:on-change 方法,用来获取fileList![](https://img-blog.csdnimg.cn/2019112823540139.png?x-os-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk1NzIwNg==,size_16,color_FFFFFF,t_70在这里插入图片描述
此时 fileList 即为上传了的文件fileList。将他赋值给一个变量

步骤二:循环遍历文件里的文件集合,获取到file.raw(raw是一个坑,看看官方api)
在这里插入图片描述
此时将fileList中的真正的文件集合遍历出来,赋值给uploadDto

步骤三:axios传递文件集合
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

此文件为@/utils/axother.xhr
在这里插入图片描述
需要注意的是,发送axios请求的时候,因为传的是formData类型的对象,所以需要在axios中配置请求头,具体看图,同时在拦截器中配置请求头,以免axios将formData类型的请求头变成了json

注意:1.如果需要在传递文件的时候附带传递别的类型数据
一.string类型数据 直接在formData定义的变量中append即可
二.类 我也不知道…

2.后端不需要配置请求头,且不能要requestBody 传递的类型为无类型
且必须把需要传递的参数封装到一个类中,不然参数传不过去,因为前端设置请求头后 formData类型数据 只能传一个参数,在formData里面加别的数据是可以的

2.贴一下上传文件限定类型,大小的方法和删除已上传文件的方法
在这里插入图片描述

在这里插入图片描述