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默认的上传行为，使用自定义方式上传。
<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上传请求接口内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue使用Element el-upload 组件踩坑记

    vue使用Element el-upload 组件踩坑记

    目录 一.基本使用 二.图片数量控制 三.图片格式限制/可以选中多张图片 补充:在vue项目中使用element-ui的Upload上传组件 一.基本使用 最近研究了一下 el-upload组件 踩了一些小坑  写起来大家学习一下 很经常的一件事情 经常会去直接拷贝 element的的组件去使用 但是用到上传组件时 就会遇到坑了 如果你直接去使用upload 你肯定会遇见这个错误 而且 上传的图片 可能会突然消失  这时候如果你没有接口  你是完全不知道为什么移除的  所以 无接口时 只能去猜测

  • vue-cli3.0+element-ui上传组件el-upload的使用

    最近项目中涉及很多文件上传的地方,然后文件上传又有很多限制.比如文件大小限制,文件个数限制,文件类型限制,文件上传后的列表样式自定义,包括上传进度条等问题.下面是我对element-ui的上传组件的一些改造, 点击查看源码. 我是自己维护了一个列表数据,再对这个列表数据进行一些操作,没用组件自带的.先看看我的组件模版 <template> <el-upload class="upload-demo" :limit="limit" :action=&

  • vue+el-upload实现多文件动态上传

    vue+el-upload实现多文件动态上传

    vue+el-upload多文件动态上传,供大家参考,具体内容如下 使用场景 点击[添加/删除],可动态增加/删除行数,并为每行上传附件,附件暂存前端,点击[上传]可以将所有附件和部分名称同时提交后台,实现表格的动态多文件上传.其中el-upload ,相关钩子函数可查看el-upload 官方文档 这里的表格行的新增是在弹框中填完再写入的,也可直接在表格中添加行,然后填写内容(template slot-scope="scope" 注释部分代码),这里仅提供思路 代码html部分 &

  • vue中el-upload上传图片到七牛的示例代码

    vue中el-upload上传图片到七牛的示例代码

    一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload

  • vue结合el-upload实现腾讯云视频上传功能

    起因 根据需求要实现一个视频上传功能,之前采用七牛云上传,小点视频没问题,大体积视频比如600M左右,再考虑到网速等其他原因就会花费半个小时左右. 后来分析到不仅要考虑上传时间的问题,更重要的是要考虑用户使用4G 网络的情况,考虑用户的流量,线上的视频,不能不做压缩转码,就放到页面上,视频不是图片,不能甩到 cdn 上就行了. 要考虑视频大小,pc 移动端适配,转码,还有防盗版等问题. 最终决定使用腾讯云上传视频,我的项目是web端上传,参考以下链接 官网链接:cloud.tencent.com

  • vue使用el-upload实现文件上传功能

    因为我是vue+springboot前后分离,要跨域,就不能用默认的action写请求地址,我用axios时最困扰的就是怎么拿到那个真实的文件,然后给传给后台. 其实可以通过自带的onchanne触发方法获得文件列表,文件信息中那个raw就是真实的文件. 写的时候,刚开始我是直接把el-upload里面的button中加了点击事件,但是每次文件还没选,就已经向后台发出请求了,当然传不过去,于是外面套了个form. element-ui组件使用可以查看文档 upload.vue <template

  • vue使用el-upload上传文件及Feign服务间传递文件的方法

    一.前端代码 <el-upload class="step_content" drag action="string" ref="upload" :multiple="false" :http-request="createAppVersion" :data="appVersion" :auto-upload="false" :limit="1&quo

  • vue el-upload上传文件的示例代码

    话不多说 直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand

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

    目录 1.概述 2.封装el-upload组件实现批量上传 1.引入上传组件 2.封装自定义上传方法 3.axios封装 1.概述 el-upload组件默认批量上传逻辑是可以批量选择文件,点击上传时候是每个文件调用一次接口,请求接口时不是批量传递文件.这样会造成上传接口频繁调用,压力增大,不利于接口的稳定性.因此我们需要对el-upload组件进行封装,实现批量文件上传只调用一次接口. 2.封装el-upload组件实现批量上传 1.引入上传组件 在vue的template标签中引入el-up

  • element-ui 中使用upload多文件上传只请求一次接口

    方法一 不使用组件内部的钩子 <el-upload class="upload-image" ref="upload" multiple :action="baseUrl" list-type="picture" :auto-upload="false" accept="image/*"> <el-button slot="trigger" size

  • 解决el-upload批量上传只执行一次成功回调on-success的问题

    目录 el-upload批量上传只执行一次成功回调on-success el-upload自定义上传后回调上传成功和失败事件 总结 el-upload批量上传只执行一次成功回调on-success 删除掉: file-list="fileList" 在网上找了下解决方法,发现取消file-list绑定即可,网上也有自定义的上传事件的方法,不过这个操作起来更方便一些. 上面方法还是有点问题,正确的方法是在后台拉数据的时候,创建一个临时变量filelist2,然后将后台的数据filelis

  • vue elementUI 处理文件批量上传方式

    目录 elementUI 如何处理文件批量上传 问题 解决 elementUI批量上传下载注意事项 在el-upload组件关键的钩子,其它省略 点击上传,将多个文件和表单数据一起上传 elementUI 如何处理文件批量上传 问题 elementUI的Upload上传组件,通过设置multiple为true,就可以实现多选文件:但是在处理的时候还是一个一个传上去.目前需要在所有文件上传后,将某几个上传错误的结果拼接起来做一次提醒 解决 this.$refs.upload.uploadFiles

  • Vue+UpLoad实现上传预览和删除图片的实践

    Vue+UpLoad实现上传预览和删除图片的实践

    1.用vue+Element完成一个图片上传.点图预览.加删除功能,如图: 2.首先我们再组件中引入这一段代码,每个属性的使用也都放在这里了: <el-upload class="upload-demo" action=""//引号里面填要上传的图片地址,用接口的话是公共的接口地址拼接一个图片的接口 :on-preview="handlePreview"//图片已经上传完成时点击触发(钩子函数) :on-remove="handl

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • 批量上传Jar包到Maven私服的工具的方法

    基本信息 适用环境:内网环境下的 Maven 私服,无法连接外网(或者需要翻墙),需要通过其他手段下载完依赖后导入到内网私服的情况. 功能描述: 单个依赖包含的pom,jar等文件应该在一个单独的目录中,可以指定下面的路径,上传 gson 到私服. 还可以指定到 f:\\.m2\\repository\\Gson\\gson,上传 gson 的多个版本. 也可以直接 f:\\.m2\\repository,将整个仓库下面的所有 jar 包的所有版本都上传到私服. 注意: 上传前,如果允许重复上传

  • vue实现图片裁剪后上传

    vue实现图片裁剪后上传

    本文实例为大家分享了vue实现图片裁剪后上传的具体代码,供大家参考,具体内容如下 一.背景 目前负责的系统(商城后台管理系统)里面有这么一个需求,为了配合前台的展示,上传的商品图片比较必须是1:1的正方形.(其它地方有时会有5:4或者16:9的需求,但较少).所以需要对上传的图片先进行裁剪,并且按要求只能裁剪为1:1,然后在进行上传. 当然,为了兼容系统其它地方有5:4或者16:9的图片比例需求,需要给出一个参数,可以随时控制图片裁剪的比例. 二.使用什么插件实现 使用 vue-cropper

  • Vue使用formData格式类型上传文件的示例

    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作. 其中,文件上传算是比较难的一种.这篇文章五分钟教会你上传文件. 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change=&quo

  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    目录 源代码 Blob.slice 切片 初始化文件内容 FormData.append() 大文件上传 断点续传 代码 创建切片 源码 worker 线程通讯的逻辑 断点续传 秒传 源代码 断点续传.分片上传.秒传.重试机制 文件上传是开发中的难点, 大文件上传及断点续传 难点中的细节及核心技术点. element-ui 框架的上传组件,是默认基于文件流的. 数据格式:form-data: 传递的数据: file 文件流信息:filename 文件名字 通过 fileRead.readAsDa

随机推荐