element-ui upload 上传组件中on-success 声明方法不生效问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui upload 上传组件中on-success 声明方法不生效问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在学习vue 2，实现element-ui 框架中upload 上传文件组件碰到的一些坑：

1.上传文件成功后on-success 声明的方法不执行。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

官方模板是上面代码，但是我是实现自定义上传文件，禁用了action实现方式，添加

:auto-upload=“false” ，然后实现**:http-request=“submitUpload”**，具体的调用上传文件接口在submitUpload方法中实现，但是这种方式调用成功后on-success 方法就不执行，改用官方默认的方式就能正常执行on-success 块中的代码

最后结论：应该是禁用了action 调用接口，实现自定义的http-request 实现，以至于on-success 在接口成功之后没有触发，这是自己试验后的结论，自己百度找不到具体的原因，也不知道是否准确。

下面是on-success方法不触发代码：文章来源地址https://www.toymoban.com/news/detail-514115.html

<el-upload class="" ref="upload" action=""
      name="file" :on-preview="handlePreview" :file-list="fileList"
      :on-success="uploadSuccess" :auto-upload="false"
      :on-change="uploadChange"  :http-request="submitUpload">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>





uploadSuccess(response, file, fileList) {
   console.log(response );
},
submitUpload(){  //执行上传图片
      this.axios({
        method: 'post',
        url: 'http://localhost:8090/uploadFile',
        data:  this.fileData,
        timeout: 4000
        // withCredentials: true
      }).then((response) => {
        //如果一定要实现on-success声明的方法只能这里显示的调用uploadSuccess方法
        this.uploadSuccess(response);
      })

},

到了这里，关于element-ui upload 上传组件中on-success 声明方法不生效问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！