[JavaScript知识库] 【无标题】

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【无标题】 -> 正文阅读

[JavaScript知识库]【无标题】

From表单中实现图片上传功能（前端上传）vue+element UI

一、实现效果

初始状态有一张默认图片，鼠标移入，显示“点击上传”，点击上传一张新的图片替换前一张图片，并获取信息。

上传图片

二、实现代码

1、HTML部分

<label type="button" @mouseover="() => {imgShow = true}" @mouseout="() => {imgShow = false}">
   <div :class="imgShow?'avatar imgWord':'avatar imgWord imgWord2'"> 点击上传 / 修改 </div>
   <img :src="imageUrl" alt="" class="avatar">
   <el-upload v-show="false" ref="upload" action="" list-type="picture-card" :before-   
     upload="beforeAvatarUpload">
       <i slot="default" class="el-icon-plus defaultPlus"></i>
    </el-upload>
 </label>

2、JS部分

export default {
  components: {},
  props: {},
  data () {
    return {
      imgShow: false,
      imageUrl: require('@/assets/img/code.svg'),  //此处是我自己项目中的图片路径
    }
  },
  methods: {
	// 上传
    beforeAvatarUpload (file) {
      const a = new FileReader()
      a.readAsDataURL(file)
      a.onload = (e) => {
        let base64 = e.target.result
        this.form.mpQr = base64   //用于给后端传值（此处是base64转码之后）
        this.imageUrl = base64    // 图片回显到页面上
      }
    }
  }
}

3、CSS部分

.imgWord {
  position: absolute;
  color: #000;
  font-size: 17px;
  font-weight: 800;
  line-height: 40px;
  text-align: center;
  display: block;
  background: rgba(255, 255, 255, 0.7);
}
.imgWord2 {
  display: none;
}
.avatar:hover {
  cursor: pointer;
}