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

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

初衷是因为自己有这个需要,然后又看了下市面上的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>
1
  • 本文分类:vue 项目实战
  • 本文标签:vueupload本地预览回显本地上传
  • 流行热度:已超过 141 人围观了本文
  • 最后更新:2020年10月21日 - 0时08分09秒
  • 发布日期:2020年10月21日 - 0时08分09秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码