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

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