在使用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. is == 编码与解码

    is 和 ==  主要是数字和字符串的比较 1 区别: ==比较的是两边的值     is比较的是两边值的id    id获取的方法 id() 2 小数据池: -5~256 3 字符串中特殊字符有id ...

  2. 可滚动UIStackView 竖向居中 / 横向右对齐

    重点: 在scroll view和stack view之间加一个UIView. 竖向居中Tutorial: https://stackoverflow.com/questions/50766400/c ...

  3. [NLP] 语义网络与知识图谱入门(一)

    语义网络与知识图谱入门(一) RDF/XML 本体:一种形式化的对于共享概念体系明确而又详细的说明.就是指一种抽象的模型,可以用来描述对象类型.属性以及关系类型所构成的世界. RDF/XML主要讲的就 ...

  4. apache源码安装 转载

    转载 1.先进入/usr/local/中创建三个文件夹 apr apr-util apache cd /usr/local目录 mkdir apr mkdir apr-util mkdir apach ...

  5. WPF 打字效果

    看到有篇是用关键字动画来做的,感觉性能不是很好,万一字太多,比如几百上千个字那会加几百上千个关键帧... 下面是我自己写的: public MainWindow() { InitializeCompo ...

  6. java的引用传递

    public class T{ static class Node{ int value; Node left = null; Node right = null; public Node(int v ...

  7. vue中html、css、js 分离

    在正常的创建和引用vue文件都是html.css.js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优 ...

  8. 使用pthread下的mutex与cond_var模拟windows下的event几个接口

    两个版本的链接: https://github.com/neosmart/pevents https://github.com/moya-lang/Event 第一个版本能够模拟等待多个事件中的一个触 ...

  9. APP Store上架QA&注意事项

    一. App Store上架费用,要多少钱. 这个因产品而异,一般是6000-10000元人民币. 二. App Store上架周期,要多久过. 这个因产品而异,正常的话一周内,如果产品老是出问题,被 ...

  10. python 并发编程 多线程 死锁现象与递归锁

    一 死锁现象 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因争夺资源而造成的一种互相等待的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等 ...