今天写项目用到了 element 的上传,要求是多选不限制上传数量,在使用时发现element都是一次一次调接口。在这里用到了http-request(覆盖默认的上传行为,可以自定义上传的实现),以及auto-upload:fal(是否在选取文件后立即进行上传)来实现多选一次性上传。
html高铁乘务员技校部分:
<el-upload class="upload-demo" ref="upload" action="http://xxx/uploadFileOSS" //后端接口 multiple :http-request="如何做系统uploadFile" :file-list="fileList" :auto-upload="fal" > <el-button slot="trigger" size="small" type="primary"人体照>选取文件</el-button></el-upload><el-button type="primary" @click="saveEdit">提交</el-button>
js部分
data() { return { fileList: [], }}methods(){ uploadFile(file) { this.fileList.push(file.file);//取到选取的文件 },团支部介绍 saveEdit(){ this.$refs.upload.submit(); let formData = new FormData(); for (let i = 0; i < this.fileList.length; i++) { formData.append('file', this.fileList[i]);//循环添加到formData,传给后端 } uploadFileOSS闭关锁国时间(formData).then(res => { // 请求接口 console.log(res) }) this.fileList=[] //上传成功清空fileList }}
本文地址:https://blog.csdn.net/huihuihaha222222/article/details/107233933
本文发布于:2023-04-07 11:34:39,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/1e95be52405843c8256f18c986d607fd.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:element ui多选图片,一次性上传.doc
本文 PDF 下载地址:element ui多选图片,一次性上传.pdf
留言与评论(共有 0 条评论) |