在使用upload中,默认是自动上传,会发现会调用两次接口,一次是Request Method: OPTIONS且不带任何参数(群里大佬说是跨域 预检测),一次是Request Method: POST请求且带上我们设定的参数

如果程序仅需上传单张图片,同时执行两次肯定是不好的,其中一次还是无效的,所以,我绑定了一个:on-change方法,手动上传图片

代码如下:

            <el-upload
class="inline-block"
action=""
:auto-upload="false"
:show-file-list="false"
:before-upload="beforeUpload"
:on-change="uploadChange">
<el-button type="primary">上传服务费加密文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传excel文件,且不超过1M</div>
</el-upload>

  

      uploadChange(file, fileList) {
let formData = new FormData()
formData.append('file', file.raw)
pub.post(this.uploadApi, formData).then((res) => {
if (res === 'success') {
this.$message.success('上传成功')
} else {
this.$message.error('上传失败')
}
})
},

解决了单张图片的上传问题

vue-element-ui upload组件调用两次接口的更多相关文章

  1. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  2. vue+element UI以组件递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. vue+element ui table组件封装,使用render渲染

    后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-tabl ...

  4. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  5. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  6. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  7. Vue+element ui table 导出到excel

    需求: Vue+element UI table下的根据搜索条件导出当前所有数据 参考: https://blog.csdn.net/u010427666/article/details/792081 ...

  8. 使用element的upload组件实现一个完整的文件上传功能(下)

    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...

  9. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

随机推荐

  1. RedisTemplate集合使用说明-opsForList(二)

    1.leftPush(K key, V value) 在变量左边添加元素值. Java代码   redisTemplate.opsForList().leftPush("list" ...

  2. OkHttp3 使用详解

    一,简介 OkHttp 是一个高效的 HTTP 客户端,具有非常多的优势: 能够高效的执行 http,数据加载速度更快,更省流量 支持 GZIP 压缩,提升速度,节省流量 缓存响应数据,避免了重复的网 ...

  3. VS部分安全函数用法

    在 VS(Visual Studio)下编译C语言程序,有时候VS会报错,提示用到的一些函数可能不安全,并且建议替换为带有_s后缀的安全函数. 安全函数是什么 scanf().gets().fgets ...

  4. LeetCode 92. 反转链表 II(Reverse Linked List II)

    题目描述 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, ...

  5. C与指针学习笔记

    有些任务无法用其他语言实现,如直接访问硬件,但C却可以. C对数组下标引用和指针访问并不进行有效性检查,这可以节省时间,但你在使用这些特性时,就必须特别小心.

  6. Postman下载与安装

    融e学-一个专注于重构知识,培养复合型人才的平台:http://www.i-ronge.com/ Postman 的官网下载地址是:https://www.getpostman.com/ 下载后看到压 ...

  7. /usr/bin/env python no such file or directory: dos格式导致的!

    最近修改了几个python文件,发现在linux上只能用python file来执行,直接./file提示错误"no such file or directory",而脚本是用&q ...

  8. 如何解决Struts2和Servlet共存问题

    我之前用Servlet写过二维码扫描登录,结果把它整合到ssh框架中,发现Servlet和Struts存在共存问题,这是因为当我们在页面在请求应用时,struts2将会截获所有请求,对于servlet ...

  9. iOS 图表工具charts介绍

    charts是一个很好的绘图工具,功能非常强大,可以用来绘制折线,柱状图,饼状图,k线图,k线分时图,雷达图,气泡图等等,charts是一款仿照安卓 MPAndroidChart而来的一个基于swif ...

  10. Sar监控

    sar 的命令格式为:sar [ -A ] [ -b ] [ -B ] [ -c ] [ -d ] [ -i interval ] [ -p ] [ -q ] [ -r ] [ -R ] [ -t ] ...