快捷導(dǎo)航

解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題

更新時(shí)間：2023年03月28日 09:46:25 作者：拿回憶下酒

這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-ui使用el-upload,before-upload函數(shù)不好使

在使用el-upload這個(gè)組件的時(shí)候,業(yè)務(wù)是需要傳其他參數(shù)給后臺(tái)，所以校驗(yàn)寫在before-upload中，在before-upload中直接返回true或者是false，依然會(huì)發(fā)文件給后臺(tái)

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
on-progress	文件上傳時(shí)的鉤子	function(event, file, fileList) — —
on-change	文件狀態(tài)改變時(shí)的鉤子，添加文件、上傳成功和上傳失敗時(shí)都會(huì)被調(diào)用	function(file, fileList)	—	—
before-upload	上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者返回 Promise 且被 reject，則停止上傳。	function(file)	—	—
auto-upload	是否在選取文件后立即進(jìn)行上傳	boolean	—	true

這里有個(gè)地方需要注意：

before-upload 是上傳前的校驗(yàn)，因此auto-upload必須為true

解決方式

我這里是采用在函數(shù)中返回一個(gè)promise來(lái)解決的：

<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不生效

因?yàn)?before-upload 是指在文件上傳之前、文件已被選中，但還沒(méi)上傳的時(shí)候觸發(fā)，而設(shè)置了 :auto-upload=“false” 后，文件上傳事件不被再次調(diào)用，所以 before-upload 不生效，所以，限制圖片大小和格式的時(shí)候，需綁定在 :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 style="float: left; line-height: 32px; padding-right: 10px">反饋數(shù)據(jù)導(dǎo)入
? ? ? ? ?? ?<span style="color:red">*</span>：
? ? ? ? </span>
? ? ? ? <el-button
? ? ? ? ?? ?slot="trigger"
? ? ? ? ?? ?size="small"
? ? ? ? ?? ?type="primary"
? ? ? ? ?? ?style="float: right;"
? ? ? ? >
? ? ? ? ?? ?瀏覽
? ? ? ? </el-button>
? ? ?</el-upload>

?// 反饋數(shù)據(jù)導(dǎo)出
? ? 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: "文件大小不可以超過(guò)10M",
? ? ? ? ? type: 'warning'
? ? ? ? });
? ? ? ? this.fileUploadList = []
? ? ? ? return false;
? ? ? }
? ? ? return (extension) && isLt2M
? ? },