在使用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. javascript模块化之CommonJS、AMD、CMD、UMD、ES6

    javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...

  2. Kotlin 的函数定义和使用 (译文 转)

    Kotlin 的函数定义和使用 函数声明Kotlin 中的函数使用 fun 关键字声明 fun double(x: Int): Int {}函数用法调用函数使用传统的方法 val result = d ...

  3. C++动态链接库实践

    参考:https://www.cnblogs.com/Anker/p/3746802.html gcc -fPIC -shared calc.c -o libcalc.so, 编译得到 在linux上 ...

  4. 说说 Activity、Intent、Service 是什么关系

    他们都是 Android 开发中使用频率最高的类.其中 Activity 和 Service 都是 Android 四大组件之一.他俩都是Context 类的子类 ContextWrapper 的子类 ...

  5. 老白关于rac性能调优的建议

    RAC应用设计方面需要在底层做很有设计.虽然ORACLE的售前人员总是说RAC的扩展性是透明的,只要把应用分到不同的节点,就可以平滑的扩展系统能力了.而事实上,RAC的CACHE FUSION机制决定 ...

  6. fastcgi_params 与 fastcgi.conf的区别

    参照文档: http://blog.51cto.com/noican/1766676

  7. 连接Xshell

    连xshell之前先进入[root@localhost zxj]# vim /etc/ssh/sshd_config, 将115行删除注释改为UseDNS  no, 保存重启sshd(xshell)的 ...

  8. Tensorflow 对上一节神经网络模型的优化

    本节涉及的知识点: 1.在程序中查看变量的取值 2.张量 3.用张量重新组织输入数据 4.简化的神经网络模型 5.标量.多维数组 6.在TensorFlow中查看和设定张量的形态 7.用softmax ...

  9. LeetCode.997-找到镇法官(Find the Town Judge)

    这是悦乐书的第373次更新,第400篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第234题(顺位题号是997).在一个城镇,有N个人从1到N标记.有传言说其中一个人是秘 ...

  10. LeetCode.941-有效山形数组(Valid Mountain Array)

    这是悦乐书的第360次更新,第387篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第222题(顺位题号是941).给定一个整数数组A,当且仅当它是一个有效的山形数组时返回 ...