vue图片上传本地预览组件使用详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue图片上传本地预览组件使用详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1887字，纯文字阅读大概需要3分钟。

内容图文

最近项目一直在使用vue，以前只是用vue做过一些简单的demo对数据进行增删改，并没有用于实际开发项目。今天就想了解一下如何用vue实现常见的图片上传前本地预览效果。

效果预览：

<template>
 <div class="image-view">
  <div class="addbox">
   <input type="file" @change="getImgBase()">
   <div class="addbtn">+</div>
  </div>
  <div class="view">
   <div class="item" v-for="(item, index) in imgBase64">
    <span class="cancel-btn" @click="delImg(index)">x</span>
    <img :src="item">
   </div>
  </div>
 </div>
</template>
<script>
 export default {
  name: 'imageView',
  data (){
   return {
    imgBase64:[] //存储img base64的值将值传给后端处理
   }
  },
  methods: {
   //获取图片base64实现预览
   getImgBase(){
    var _this = this;
    var event = event || window.event;
    var file = event.target.files[0];
    var reader = new FileReader(); 
    //转base64
    reader.onload = function(e) {
     _this.imgBase64.push(e.target.result);
    }
    reader.readAsDataURL(file);
   },
   //删除图片
   delImg(index){
    this.imgBase64.splice(index,1);
   }
  }
 }
</script>
<style scoped>
 *{margin:0 auto;padding:0;font-family:"微软雅黑";}
 .clearboth::after{
  content:"";
  display:block;
  clear:both;
 }
 .image-view{
  width:400px;
  height:300px;
  margin:50px auto;
 }
 .image-view .addbox{
  float:left;
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:20px;
  text-align:center;
 }
 .image-view .addbox input{
  position:absolute;
  left:0;
  height:100px;
  width:100px;
  opacity:0;
 }
 .image-view .addbox .addbtn{
  float:left;
  height:100px;
  width:100px;
  line-height:100px;
  color:#fff;
  font-size:40px;
  background:#ccc;
  border-radius:10px;
 }
 .image-view .item {
  position:relative;
  float:left;
  height:100px;
  width:100px;
  margin:10px 10px 0 0;
 }
 .image-view .item .cancel-btn{
  position:absolute;
  right:0;
  top:0;
  display:block;
  width:20px;
  height:20px;
  color:#fff;
  line-height:20px;
  text-align:center;
  background:red;
  border-radius:10px;
  cursor:pointer;
 }
 .image-view .item img{
  width:100%;
  height:100%;
 }
 .image-view .view{
  clear:both;
 }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的vue图片上传本地预览组件使用详解全部内容，希望文章能够帮你解决vue图片上传本地预览组件使用详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---