在项目中需要使用文件上传,用到了element中的el-upload,这其中有很多的坑。
1.el-upload中的action原本指向发送请求的url,但很多时候我们除了上传文件以外还需要同时上传其他文件或者数据,进行手动上传的操作。
不能直接删除action属性,需要把action置空或者设置为‘#’,不然会报错。

示例图
第1个action为官方文档给的标准请求,当我们需要手动上传时,可以参照第2个和第3个action设置。
2.手动上传时,涉及到一个问题,如何获取要上传的文件?本来以为是el-upload中的file-list就是实际的文件,最后发现并不是,获取到的是上传文件的列表。
获取实际文件需要借助el-upload的on-change、on-remove等方法。
例如用on-change绑定function,这里function名为:'changefile',

方法demo.png
filelist这个对象里面有很多属性,我们上传文件时,实际上传的是filelist列表中每一项的raw,只有raw可以正常上传, 获取到文件后,需要定义变量保存文件。所以需要获取filelist中的raw进行保存。
这里我用的formdata上传多文件,console打印formdata,文件在控制台中显示的格式为binary。