vue封装el-upload批量上传只请求一次接口
短信预约 -IT技能 免费直播动态提醒
1.概述
el-upload组件默认批量上传逻辑是可以批量选择文件，点击上传时候是每个文件调用一次接口，请求接口时不是批量传递文件。这样会造成上传接口频繁调用，压力增大，不利于接口的稳定性。
因此我们需要对el-upload组件进行封装，实现批量文件上传只调用一次接口。
2.封装el-upload组件实现批量上传
1.引入上传组件
在vue的template标签中引入el-upload组件，引入代码和属性说明如下。
el-upload组件封装参数介绍
- multiple：默认true，批量选择属性。
- action： 上传接口地址，这里我们使用自定义方式上传，因此这个值为空。
- show-file-list： 是否显示选择文件的列表
- auto-upload： 选择文件后是否自动上传，这里必须设置为不自动上传，使用我们封装的方法上传
- http-request：覆盖action默认的上传行为，使用自定义方式上传。
<el-upload ref="upload" multiple action="" :show-file-list="false" :auto-upload="false" :http-request="uploadFile">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5G</div>
</el-upload>
2.封装自定义上传方法
上面我们引入el-upload组件时，使用http-request属性覆盖了默认的上传行为，使用自定义的上传行为，下面就来封装自定义的上传方法。
在vue页面的
<script>
export default {
data() {
return {
// 上传的多个文件
files: [],
}
},
methods: {
// 将选择的批量文件添加到files数组中
uploadFile(raw) {
this.files.push(raw.file)
},
// 请求后端上传接口上传文件
async submitUpload() {
// el-upload原始上传方法
this.$refs.upload.submit()
// 创建FormData对象，通过该对象实现批量文件上传
let fd = new FormData()
// 因为要上传多个文件，所以需要遍历一下才行,不要直接使用我们的文件数组进行上传，你会发现传给后台的是两个Object
this.files.forEach(function (file) {
// 遍历files数组，将file添加到FormData对象中
fd.append("file", file, file.name)
})
// 请求后端接口
nanoApi
.uploadFile(fd)
.then((res) => {
console.log("上传文件", res)
})
.catch((error) => {
console.log("上传失败" + error)
})
},
}
}
</script>3.axios封装
axios是封装好的，下面是请求上传接口参数。
uploadFile(data) {
return request({
url: `/api/v1/upload`,
method: "post",
//Content-Type请求类型必须设置为multipart/form-data
headers: {
"Content-Type": "multipart/form-data",
},
// 上传文件
data,
})
},
到此这篇关于vue封装el-upload批量上传只请求一次接口的文章就介绍到这了,更多相关vue el-upload上传请求接口内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
