首页 > 作文

element ui多选图片,一次性上传

更新时间:2023-04-07 11:34:46 阅读: 评论:0

今天写项目用到了 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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图