input上传图片

上传图片这一个功能element plus中虽然有这个组件，但是自定义功能这块还是有点麻烦，所以自己尝试着写了一个上传图片的组件。

如下图所示，右边是一个加号，点击唤起上传功能，左边是对上传的图片进行一个展示

当将鼠标放在图片之上，显示删除图标，点击可以进行删除操作。
（1）上传图片组件
html代码：

<div class="image">
//这是input按钮
  <label for="image" class="input">
    <input id="image" type="file" @change="uploadimage($event)"/>
  </label>
  <!-- 这是加号图标 -->
  <component
  class="icon"
  :is="icon"></component>
</div>

css代码：

.image {
//外部盒子有个高度和宽度
  width: 100px;
  height: 100px;
//通过flex布局使得加号图标水平垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
//添加虚线
  border: 1px dashed #CFD3DC;
//添加圆角
  border-radius: 10px;
  .input {
  //添加透明度属性为0，隐藏input
    opacity: 0;
    position: absolute;
  //通过margin-left使得input按钮和加号图标重合
    margin-left: 156px;
  }
  .icon {
    width: 60px;
    color: #CFD3DC;
  }
}

（2）图片展示
html代码：

<div class="imagepreview" v-for="(img,index) in imagelist"
:key="index">
  <!-- 图片展示 -->
  <img :src="img" alt="" class="img">
  <!-- 鼠标悬浮 Delete -->
  <div class="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

const getObjectURL = (file) => {
  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
  const url = URL.createObjectURL(file);
  return url;
};
const uploadimage = (ev: Event) => {
  if (imagelist.length <= 2) {
    const url = getObjectURL((ev.target as HTMLInputElement).files[0]);
    imagelist.push(url);
    document.getElementById('image').value = '';
    emits('changeimage', imagelist);
  } else {
    ElMessage({
      message: '只能上传六张图片。',
      type: 'warning',
    });
  }
};