el-upload上传组件 - 仅上传一个图片,且上传后隐藏选择的+号


<template>
    <el-form
        ref="myFormRef"
        :model="myForm"
        label-width="100px"
        size="medium"
    >
	  	<el-upload
	        :class="{hide:hideUpload}" //绑定class
	        action="#"                 //必选参数,上传的地址
	        list-type="picture-card"   //文件列表的类型:text/picture/picture-card
	        :on-remove="handleRemove"  //文件列表移除文件时的钩子
	        :on-change="onChange"      //文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
	        :limit="limitCount"        //最大允许上传个数
	        :on-success="handleSuccess"//文件上传成功时的钩子
	        :data="uploadData"         //上传时附带的额外参数
	        :show-file-list="false"    //是否显示已上传文件列表
	        >
	        <img
		        class="el-upload-list__item-thumbnail"
		        v-if="url"               //如果图片路径url存在,显示图片
		        :src="url" 
	        >
	        <i v-else slot="default" class="el-icon-plus"></i>  //如果图片路径url不存在,显示上传+号
    	</el-upload> 
    </el-form>
  
</template>
<script>
    export default {
        name:'suoLueTu', 
        data(){
            return{
                hideUpload: false,
                limitCount:1 ,
                url:'',
                uploadData: {
                    name: 'testFile',
                },
            }
        },
        methods: {
             onChange(file, fileList){
            	this.hideUpload = fileList.length >= this.limitCount;
            },

            handleRemove(file,fileList){
            	this.hideUpload = fileList.length >= this.limitCount;
            },
            handleSuccess(file,fileList) {
            	this.$set(this.myForm, "netTgThumbnail", fileList.response.bean.result.fileUrlPath)
            },
        }

    }
</script>

引自:“https://www.cnblogs.com/Byme/p/10905731.html”(侵删)

上一篇:JDK、JRE、JVM三者区别


下一篇:BUUCTF之[Zer0pts2020]Can you guess it? basename函数绕过