vue3 + elementPlus 上传图片

本文介绍: vue3 + elementPlus 上传图片，上传单张和多张图片，上传多张图片时，超过限制，隐藏上传按钮

一、上传单个图片

&lt;el-form-item label="图片"  prop="image"&gt;
    &lt;el-upload 
    	class="dl-avatar-uploader-min square" 
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleUpImage"
        :before-upload="beforeImageUpload"
        list-type="picture"
        accept="image/*"
        &gt;
        &lt;el-image v-if="addform.image" :src="addform.image" class="avatar"&gt;</el-image>
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        <template #tip>
            <div class="el-upload__tip">只能上传图片,且单张图片大小不能超过10MB</div>
        </template>
    </el-upload>
</el-form-item>

export default {
	setup() {	
		const dataSet = reactive({
			uploadUrl: baseurl+'/api/common/upload',
			addfrom:{
				image:''
			}
		})
		const methods = {
			// 上传前，限制的上传图片大小
			beforeImageUpload(rawFile){
                if(rawFile.size / 1024 / 1024 > 10){
                    ElMessage.error("单张图片大小不能超过10MB!");
                    return false;
                }
                return true;
            },
			// 上传成功，获取返回的图片地址
            handleUpImage(res){
                dataSet.addform.image = res.data.url;
            },
		}
		
		
	}
}

二、上传多张图片，超过限制隐藏上传按钮

效果图-未满9张：
在这里插入图片描述
效果图 – 满9张：

<el-form-item label="封面图片" :prop="addform.ppid!=6?'covers':''">
   <el-upload 
        class="dl-avatar-uploader-min square" 
        :class="{uoloadBtn:showBtnDealImg,disUoloadBtn:noneBtnImg}"
        :action="uploadUrl"
        :limit="limitCountImg"
        :on-success="coverFileSuccess" 
        :on-remove="coverFileRemove"
        :on-exceed="handleExceedCover"
        :before-upload="beforeImageUpload"
        :on-change="handleImgChange"
        :file-list="fileList"
        list-type="picture-card"
        accept="image/*"
        multiple
        >
        <el-button type="text">上传图片</el-button>
        <template #tip>
            <div class="el-upload__tip">最多上传9张图片,且单张图片大小不能超过10MB</div>
        </template>
    </el-upload>
</el-form-item>

.disUoloadBtn .el-upload--picture-card{
    display:none;   /* 上传按钮隐藏 */
}

export default {
	setup() {	
		const dataSet = reactive({
			uploadUrl: baseurl+'/api/common/upload',
			coversList:[],
			limitCountImg:9,
			showBtnDealImg:true,
            noneBtnImg:false,
		})
		const methods = {
			handleImgChange(file, fileList){
                dataSet.noneBtnImg = fileList.length >= dataSet.limitCountImg;
            },
             beforeImageUpload(rawFile){
                if(rawFile.size / 1024 / 1024 > 10){
                    ElMessage.error("单张图片大小不能超过10MB!");
                    return false;
                }
                return true;
            },
             coverFileSuccess(response, file, fileList) {
                if(response.code==0){
                    let obj = {};
                    obj.name = file.name;
                    obj.url = response.data.url;
                    dataSet.coversList.push(obj);
                }else{
                    ElMessage.error({
                        message: response.msg,
                        type: "error",
                    });
                }
                
            },
            coverFileRemove(file, fileList) {
                dataSet.coversList.forEach((item, index) => {
                    if (file.name == item.name) {
                        dataSet.coversList.splice(index, 1);
                    }
                });
                dataSet.noneBtnImg = fileList.length >= dataSet.limitCountImg;
            },
            handleExceedCover(files, fileList){
                ElMessage.error({
                    message: `上传图片数量超出限制！`,
                    type: "error",
                });
            },
		}
		
		
	}
}