element 上传 点击后直接调起文件选择

element el-upload 上传 点击后直接调起文件选择 (或上传)

成品展示
1.未点击时（默认情况，点击红框直接调起文件选择：下图）

2.点击时 （红框被点击，调起文件选择）

3.如果符合你的需求看代码👇

代码

html部分

      <div  style="width: 270px;height: 150px;overflow: hidden">
        <el-upload
          action="string"
          :auto-upload="false" :on-change="handleWxLoad"
          :show-file-list="false">
          <el-image v-if="!File[0].url" style="width: 120px; height: 120px"
                :src="require('@/assets/images/showWxQrcode.png')">
          </el-image>  // 为空时使用默认图
          <img v-else style="width: 120px;height: 120px;overflow: hidden"
        :src="File[0].url" alt="">
        </el-upload>
     </div>

Js部分

	handleWxLoad(file) {
	//转64
	  this.getBase64(file.raw).then(res => {
		return this.File[0].url = res
	  });  //
	  //转64
	  this.File.push(file.raw); //文件格式
	},

方法 this.getBase64()在这里

css部分 必须要修改 （删除的蒙板 del 按键）

	::v-deep  无效 可换成 /deep/
	 // del删除文件
	::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
		display: none !important;
	}
	// 删除的蒙版和事件
	::v-deep .el-icon-delete {
	  display: none;
	}

	::v-deep .el-upload-list__item-delete {
	  display: none;
	}

	::v-deep .el-upload-list--picture-card .el-upload-list__item-actions {
	  background-color: transparent;
	}

都看👓完了，就👍1️⃣👇吧
♥ 希望帮助到你 ♥