木灵鱼儿

木灵鱼儿

阅读：1276

最后更新：2020/10/21/ 0:08:09

图片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>
文章分类 vue 项目实战
文章标签 vueupload本地预览回显本地上传
木灵鱼儿

木灵鱼儿

发布了 583 篇文章获得点赞 1获得阅读 1276

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 1
文章被阅读 1276

相关文章

meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法
不同平台的回车处理 warning Delete `␍` prettier prettier不同平台的回车处理 warning Delete `␍` prettier prettier
windows下软链接和硬链接windows下软链接和硬链接

目录树