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

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,
 })
 },
作者:Bruce小鬼原文地址:https://brucelong.blog.csdn.net/article/details/128579034

%s 个评论

要回复文章请先登录注册