访客 上传图片这一个功能elementplus中虽然有这个组件，但是自定义功能这块还是有点麻烦，所以自己尝试着写了一个上传图片的组件。
如下图所示，右边是一个加号，点击唤起上传功能，左边是对上传的图片进行一个展示
当将鼠标放在图片之上，显示删除图标，点击可以进行删除操作。
（1）上传图片组件
html代码：
<divclass="image">//这是input按钮<labelfor="image"class="input"><inputid="image"type="file"@change="uploadimage($event)"/></label><!--这是加号图标--><componentclass="icon":is="icon"></component></div>css代码：
.image{//外部盒子有个高度和宽度width:100px;height:100px;//通过flex布局使得加号图标水平垂直居中display:flex;justify-content:center;align-items:center;//添加虚线border:1pxdashed#CFD3DC;//添加圆角border-radius:10px;.input{//添加透明度属性为0，隐藏inputopacity:0;position:absolute;//通过margin-left使得input按钮和加号图标重合margin-left:156px;}.icon{width:60px;color:#CFD3DC;}}（2）图片展示
html代码：
<divclass="imagepreview"v-for="(img,index)inimagelist":key="index"><!--图片展示--><img:src="img"alt=""class="img"><!--鼠标悬浮Delete--><divclass="delete"><el-icon@click="deleteImage(index)"style="font-size:30px;"><Delete/></el-icon></div></div>css代码：
//通过flex布局使得图片和遮罩排在一行，遮罩添加opacity:0;隐藏添加z-index处于图片上方，通过hover选择器改变遮罩的opacity.imagepreview{display:flex;.img{width:100px;height:100px;}.delete{width:100px;height:100px;background-color:rgba(101,101,101,0.6);display:flex;justify-content:center;align-items:center;position:absolute;z-index:1000;opacity:0;}&:hover.delete{opacity:1;}}js代码：input上传图片后在本地生成一个可以预览的URL
constgetObjectURL=(file)=>{//下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的js函数而已consturl=URL.createObjectURL(file);returnurl;};constuploadimage=(ev:Event)=>{if(imagelist.length<=2){consturl=getObjectURL((ev.targetasHTMLInputElement).files[0]);imagelist.push(url);document.getElementById('image').value='';emits('changeimage',imagelist);}else{ElMessage({message:'只能上传六张图片。',type:'warning',});}};