vue封装el-upload批量上传只请求一次接口

目录

• 1.概述
• 2.封装el-upload组件实现批量上传
• 1.引入上传组件
• 2.封装自定义上传方法
• 3.axios封装

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默认的上传行为，使用自定义方式上传。

    选取文件
    上传到服务器
    
只能上传jpg/png文件，且不超过5G

2.封装自定义上传方法

上面我们引入el-upload组件时，使用http-request属性覆盖了默认的上传行为，使用自定义的上传行为，下面就来封装自定义的上传方法。
在vue页面的

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上传请求接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！