我转过几个弯绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留喝过几壶酒
不过年少白头道义放胸口
倘若明天之后遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
又过了几个弯算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休

图片upload组件，本地上传预览，无需传到服务器即可预览图片

木灵鱼儿

40 天前vue 项目实战

141 0 1

初衷是因为自己有这个需要，然后又看了下市面上的ui组件，基本都没这个功能，不知道他们怎么想的，为什么要一定要传到服务器等拿到api参数才进行回显，且图片是在线连接。

这不是很蛋疼吗？？？？？

我本地随便传个图，你就丢服务器了，不是很费资源吗？

预览图

使用

因为就花了半个小时写，没怎么精心，反正代码极度简洁，二开也方便，有需要自取。

反正就是，除了icon用的饿了么框架的，其他的都是自写css，所以兼容性还可以，懂的都懂，不懂的，就先学学基础吧。

源码

<template>
  <div class="upload">
    <div class="upload-container">
      <label class="upload-icon" for="upload-file">
        <i class="el-icon-plus"></i>
      </label>
      <input
        class="upload-input"
        id="upload-file"
        type="file"
        accept="image/*"
        @change="tirggerFile($event)"
      />
      <div v-if="imgSrc" class="upload-img">
        <img :src="imgSrc" />
        <div class="mask">
          <i class="el-icon-delete" @click="deleteImgSrc"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgFile: [],
      imgSrc: "",
    };
  },
  methods: {
    tirggerFile(evnet) {
      this.imgFile = evnet.target.files;
      let url = "";
      //创建reader对象
      let reader = new FileReader();
      //传入文件 （参数必须是blob对象）
      reader.readAsDataURL(this.imgFile[0]);
      //加载完成
      reader.onloadend = (event) => {
        // url = reader
        this.imgSrc = reader.result;
      };
    },
    deleteImgSrc() {
      (this.imgFile = []), (this.imgSrc = "");
    },
  },
};
</script>
<style lang="scss" scoped>
.upload {
  margin-bottom: 100px;
  .upload-container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border: 1px dashed;
    border-radius: 5px;
    color: #999;
    cursor: pointer;
    z-index: 1;
    &:hover,
    &:active {
      color: #3576ff;
    }
    .upload-icon {
      display: block;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    .upload-input {
      display: none;
    }
    .upload-img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        opacity: 0;
        transition: opacity 0.3s ease-out;
      }
      &:hover {
        .mask {
          opacity: 1;
        }
      }
    }
  }
}
</style>