zoukankan      html  css  js  c++  java
  • vue-element-ui upload组件调用两次接口

    在使用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('上传失败')
              }
            })
          },

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

  • 相关阅读:
    js事件
    增量
    文本文件输入(忽略行)
    当数据库的字段为date类型时候
    枚举的使用
    input输入框用el对数字格式化
    图片提交按钮各浏览器不兼容问题
    js对数字的校验
    时间控件
    ymPrompt消息提示组件4.0版 演示及使用简介
  • 原文地址:https://www.cnblogs.com/zph666/p/7551676.html
Copyright © 2011-2022 走看看