在使用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. spark中使用的内存文件系统-Tachyon FS 简介

    转自:http://blog.csdn.net/u014252240/article/details/41810849  发布人:南京大学PASA大数据实验室顾荣 1. Tachyon是什么 Tach ...

  2. gherkin

    语法 The primary keywords are: Feature Rule (as of Gherkin 6) Scenario (or Example) Given, When, Then, ...

  3. vue动态构造下拉

    在点击菜单的进入后台初始化方法 @RequestMapping("/init") public String init(@ModelAttribute("response ...

  4. Uep的confirm和alert弹窗

    $.confirm("确认删除", "确定删除所选服务么?", function() { ajaxgrid.delCheckedRecords(); var g ...

  5. MobileNetV2: Inverted Residuals and Linear Bottlenecks

    1. 摘要 作者提出了一个新的网络架构 MobileNetV2,该架构基于反转残差结构,其中的跳跃连接位于较瘦的瓶颈层之间.中间的扩展层则利用轻量级的深度卷积来提取特征引入非线性,而且,为了维持网络的 ...

  6. JavaEE-实验一 Java常用工具类编程

    该博客仅专为我的小伙伴提供参考而附加,没空加上代码具体解析,望各位谅解 1.  使用类String类的分割split 将字符串  “Solutions to selected exercises ca ...

  7. LoadRunner运行时异常处理

    VuGen提供了错误处理函数lr_continue_on_error,用来在脚本中实时修改Vuser的出错设置.lr_continue_on_error函数语法结构如下: Loadrunner在运行过 ...

  8. sql 查询某一列最大的数据

    select colm1,Max(colm2),max(colm3) from table where condition group by colm1

  9. python中利用队列asyncio.Queue进行通讯详解

    python中利用队列asyncio.Queue进行通讯详解 本文主要给大家介绍了关于python用队列asyncio.Queue通讯的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细 ...

  10. SAS数据挖掘实战篇【六】

    SAS数据挖掘实战篇[六] 6.3  决策树 决策树主要用来描述将数据划分为不同组的规则.第一条规则首先将整个数据集划分为不同大小的 子集,然后将另外的规则应用在子数据集中,数据集不同相应的规则也不同 ...