Element中的el-upload使用过程中踩的坑

在项目中需要使用文件上传,用到了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。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。