el-upload 只调一次接口上传（自定义上传文件）

最新推荐文章于 2024-08-05 15:11:23 发布

七彩猫猫虫

最新推荐文章于 2024-08-05 15:11:23 发布

阅读量882

点赞数 1

分类专栏：工作中的小问题文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/SDAW_1/article/details/125198021

版权

本文介绍如何使用Vue.js的el-upload组件实现点击确定才调用接口上传文件的功能，并且能同时传入其他两个字段。通过自定义上传行为，实现了在选择文件后延迟调用接口，提高用户体验。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

当点击选择文件按钮时，不会调接口，点击确定时，才会调接口将文件和另外两个字段一起上传

代码

html

 <el-upload
            class="upload-demo"
            action
            :http-request="uploadFile"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="1"
            style="margin-left: 20px"
          >
            <el-button size="small" type="primary">选择文件</el-button>
            <div slot="tip" class="el-upload__tip">
              支持扩展名：.xls , .xlsx 文件大小：10MB以内
            </div>
          </el-upload>