最近在學(xué)習(xí)vue 2，實現(xiàn)element-ui 框架中upload 上傳文件組件碰到的一些坑：

1.上傳文件成功后on-success 聲明的方法不執(zhí)行。

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-change="handleChange"
  :file-list="fileList">
  <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>

官方模板是上面代碼，但是我是實現(xiàn)自定義上傳文件，禁用了action實現(xiàn)方式，添加

:auto-upload=“false” ，然后實現(xiàn)**:http-request=“submitUpload”**，具體的調(diào)用上傳文件接口在submitUpload方法中實現(xiàn)，但是這種方式調(diào)用成功后on-success 方法就不執(zhí)行，改用官方默認(rèn)的方式就能正常執(zhí)行on-success 塊中的代碼

最后結(jié)論：應(yīng)該是禁用了action 調(diào)用接口，實現(xiàn)自定義的http-request 實現(xiàn)，以至于on-success 在接口成功之后沒有觸發(fā)，這是自己試驗后的結(jié)論，自己百度找不到具體的原因，也不知道是否準(zhǔn)確。

下面是on-success方法不觸發(fā)代碼：文章來源地址http://www.zghlxwxcb.cn/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(){  //執(zhí)行上傳圖片
      this.axios({
        method: 'post',
        url: 'http://localhost:8090/uploadFile',
        data:  this.fileData,
        timeout: 4000
        // withCredentials: true
      }).then((response) => {
        //如果一定要實現(xiàn)on-success聲明的方法只能這里顯示的調(diào)用uploadSuccess方法
        this.uploadSuccess(response);
      })

},

到了這里，關(guān)于element-ui upload 上傳組件中on-success 聲明方法不生效問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！