element-ui使用el-upload,before-upload函數不好使問題怎么解決

這篇文章主要介紹了element-ui使用el-upload,before-upload函數不好使問題怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇element-ui使用el-upload,before-upload函數不好使問題怎么解決文章都會有所收獲，下面我們一起來看看吧。

element-ui使用el-upload,before-upload函數不好使

在使用el-upload這個組件的時候,業務是需要傳其他參數給后臺，所以校驗寫在before-upload中，在before-upload中直接返回true或者是false，依然會發文件給后臺

這里有個地方需要注意：
 

before-upload 是上傳前的校驗，因此auto-upload必須為true

解決方式

我這里是采用在函數中返回一個promise來解決的：

<template>
	<el-upload
	  class="avatar-uploader"
	  action="https://xxx.xxx.com/xxx/xxx"
	  :show-file-list="false"
	  :on-success="handleAvatarSuccess"
	  :before-upload="beforeAvatarUpload">
	  <img v-if="imageUrl" :src="imageUrl" class="avatar">
	  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
	</el-upload>
</template>
<script>
export default {
	data() {
      return {
        imageUrl: ''
      };
    },
	methods: {
		beforeAvatarUpload (file) {
	      return new Promise(async (resolve, reject) => {
	      	// 失敗
	        if ('xxx' !=0) {
	          reject()
	        } else {
	        	// 成功
	        	resolve()
			}
	      })
	    },
	    handleAvatarSuccess(res, file) {
	        this.imageUrl = URL.createObjectURL(file.raw);
	    }
	 }
 }
 </script>

ElementUI el-upload上傳圖片限制,before-upload 不生效

因為 before-upload 是指在文件上傳之前、文件已被選中，但還沒上傳的時候觸發，而設置了 :auto-upload=“false” 后，文件上傳事件不被再次調用，所以 before-upload 不生效，所以，限制圖片大小和格式的時候，需綁定在 :on-change 里面

     <el-upload
         class="upload-demo uploadTwo"
         ref="fileUploadRef"
         :action="fileUrl + 'order/mdm/partpredictioncoord/import'"
         :file-list="fileUploadList"
         :auto-upload="false"
         :headers="header"
         name="uploadFile"
         :limit="1" multiple
         :on-change="beforeFeedBackExport"
         :on-success="fileUploadSuccess">
        <span >反饋數據導入
            <span >*</span>：
        </span>
        <el-button
            slot="trigger"
            size="small"
            type="primary"
            
        >
            瀏覽
        </el-button>
     </el-upload>

 // 反饋數據導出
    beforeFeedBackExport(file) {

      // this.tableFileName = file.name;


      let testFile = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()

      const extension = testFile === 'xlsx' || testFile === 'xls';

      const isLt2M = (file.size / 1024 / 1024 < 10);
      if (!extension) {
        this.$message({
          message: '上傳文件只能是xls/xlsx!',
          type: 'warning'
        });
        this.fileUploadList = []
        return false;
      }
      if (!isLt2M) {
        this.$message({
          message: "文件大小不可以超過10M",
          type: 'warning'
        });
        this.fileUploadList = []
        return false;
      }
      return (extension) && isLt2M
    },

關于“element-ui使用el-upload,before-upload函數不好使問題怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“element-ui使用el-upload,before-upload函數不好使問題怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。