Vue实现点击上传图片预览图片功能

最新推荐文章于 2024-08-24 15:00:00 发布

土生土长的IU

最新推荐文章于 2024-08-24 15:00:00 发布

阅读量3.8k

点赞数

分类专栏： vue.js 文章标签：上传图片

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/100764122

版权

vue.js 专栏收录该内容

85 篇文章 1 订阅

订阅专栏

效果

在这里插入图片描述

删除按钮是我自己做的

下面上源代码（如果不理解，请在下面提出问题）

html(采用了element组件)

 <div>
             上传图片：
 </div>
       <div style="display:flex;flex-wrap: wrap;justify-content:Center">
             <div v-if="preImg!=''" style="position:relative;display:inline-block;">
                 <img style="width:80px;height:80px;" :src="preImg">
                 <div @click="preImg=''" style="cursor: pointer; position:absolute;
                 	top:-10px;left:92%;background:red;
                 	color:white;border-radius:50%;height:18px;width:18px;
                	 font-weight:bold;text-align:center;line-height:18px">×</div>
                  </div>

                <div v-if="preImg==''" style="display:inline-block;">
                     <img style="width:60px;height:60px;margin:10px" @click="onPickFile2(itemIndex,list[itemIndex])" src="@/assets/add.png">
                     <input id="upimg" type="file" ref="fileInput" accept="image/*" @change="getFile2" style="display: none;">
                </div>  </div>
                    <div style="margin-top:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;">
                    
                        <el-button style="width:140px">保存</el-button>
        
                    </div>

js

data(){
	preImg:'', //存放预览的图片
	postData:{
		img:'',.
},//存放提交的图片
}
 // ---测试上传图片
        onPickFile2() {
            this.$refs.fileInput.click();
        },
        getFile2: function(e) {
            // console.log("e是什么",e)
            let $target = e.target || e.srcElement;
            let file = $target.files[0];
            // 上传的图片
            this.postData.img = file;   //存放提交图片
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = data => {
                let res = data.target || data.srcElement;
                //   预览的图片
                this.preImg = res.result;
            };
            // document.getElementById("upimg").value = "";  //这是能否上传同一张图片的关键
            console.log("gaidongchenggong");
        },
        // ---↑