快捷導(dǎo)航

解決vue2.0 element-ui中el-upload的before-upload方法返回false時submit()不生效問題

更新時間：2018年08月24日 11:43:37 作者：kristy1993

這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時submit()不生效的解決方法，這里需要主要項目中用的element-ui是V1.4.3，感興趣的朋友參考下吧

我要實現(xiàn)的功能是在上傳文件之前校驗是否表格中存在重復(fù)的數(shù)據(jù)，有的話，需要彈窗提示是否覆蓋，確認之后繼續(xù)上傳，取消之后，就不再上傳。

項目中用的element-ui是V1.4.3

<el-upload
   class="upload-demo" drag
   ref="fileUpload"
   :action="urls.fileUpload"
   :on-success="handleUploadSuccess"
   :on-error="handleUploadError"
   :on-progress="progressUpload"
   :before-upload="beforeUpload"
   show-file-list
   multiple>
   <i class="el-icon-upload"></i>
  <div class="el-upload__text">點擊上傳，或者拖拽到這里</div>
 </el-upload>

代碼中我是將before-upload方法返回false，然后點擊確認之后，調(diào)_this.$refs.fileUpload.submit();但是在點擊確定之后，文件還是沒有上傳，后面去看了element-ui源碼，發(fā)現(xiàn)before-upload方法如果返回false，submit()方法是會被攔截的。
還有第二個問題，就是取消時_this.$refs.fileUpload.clearFiles();我調(diào)的clearFiles()方法，這個方法會把文件列表全部清空，我只想刪除我當時取消的那個文件。
后面將這兩句換成了如下兩句：

繼續(xù)上傳：_this.$refs.fileUpload.$children[0].post(file);

取消時在文件列表中刪除該文件：_this.$refs.fileUpload.handleRemove(file);

補充：VUE2.0 element upload使用

<template>
 <div class="uptemp">
  <el-upload
   class="upload-demo"
   ref="upload"
   multiple="false"
   action="/web/api/uploadFile"
   :on-preview="handlePreview"
   :on-remove="handleRemove"
   :on-change="handleChange"
   :before-upload="beforeUpload"
   :file-list="fileList"
   :auto-upload="false"
   :multiple="false">
   <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
   <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">導(dǎo)入</el-button>
   <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件</div>
  </el-upload>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    fileList: []
   }
  },
  mounted: function () {
   //加載完頁面執(zhí)行的函數(shù)
  },
  methods: {
   submitUpload() {
    this.$refs.upload.submit();
   },
   handleRemove(file, fileList) {
    console.log(file, fileList);
   },
   handlePreview(file) {
    console.log(file);
   },
   handleChange(file, fileList){
    console.log(file);
    console.log(fileList);
   },
   beforeUpload: function (file) {
    console.log(file)
    //這里是重點，將文件轉(zhuǎn)化為formdata數(shù)據(jù)上傳
    let fd = new FormData()
    fd.append('file', file)
    this.$http.post('/web/api/uploadFile', fd).then((res) => {
     console.log(res)
    }, (res) => {
     console.log(res)
    });
    return false;
   }
  },
  components: {
//      組件
  }
 }
</script>
<style scoped>
</style>
<style>
 .uptemp .el-upload-list {
  position: absolute;
  left: 140px;
  top: 0;
  width: 50%;
 }
 .uptemp {
  position: relative;
 }
 .uptemp .el-upload-list .el-upload-list__item {
  margin-top: 0;
 }
</style>

總結(jié)

以上所述是小編給大家介紹的解決vue2.0 element-ui中el-upload的before-upload方法返回false時submit()不生效問題，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: