Vue+Element-ui改造upload组件进行多文件一次上传

本文介绍了如何改造Element-ui的upload组件以实现多文件一次性上传。在默认情况下,Element的多文件上传会分多次请求。通过自定义上传方法,利用FormData和axios,可以在上传图片时发送一次请求完成所有文件的上传。详细步骤包括在Vue数据中创建FormData对象,将文件和参数加入其中,然后使用axios提交请求。参考资料包括FormData和axios的官方文档,以及一篇来自CSDN的文章。
摘要由CSDN通过智能技术生成

       Element组件功能强大,扩展性也好,upload文件上传组件支持单文件上传,对于办公文件,头像等都有专门的解决方案,同时可以附加参数,并且也能进行多文件上传,但是这里的多文件上传是分多次请求发送到后台的,可能不符合大多数情况的需求。

      本次的需求是做故障报修模块,需要图片上传,并且是多文件一起上传,发一次请求搞定,这时需要对upload组件进行改造,放弃Element的默认上传方法,自己编写上传方法:

                            <el-form-item label="图片">  
                                <el-upload
                                :action="uploadUrl"
                                :multiple="true"
                                ref="upload"
                                list-type="picture-card"
                                :on-success='uploadSuccess'
                                :on-error='uploadError'
                                :on-preview="handlePictureCardPreview"
                                :on-change
  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值