vue上传图片并预览

vue上传图片并预览html代码:<divid=”headImg”><divid=”myPhoto”><divclass=”viewPhoto”@click=”monidianji”><icl…

大家好,又见面了,我是你们的朋友全栈君。

html代码:

<div id="headImg">
                        <div id="myPhoto">
                            <div class="viewPhoto" @click="monidianji">
                                <i class="el-icon-plus"></i>
                                <img :src=imageSave alt="" id="portrait" style="width: 200px;height: 200px" />
                            </div>
                            <p>提示:请选择本地图片上传,支持各种图片格式</p>
                            <div class="listBox">
                                <input type="file" id="saveImage" name="myphoto">
                            </div>
                            <div class="save">
                                <el-button type="danger" size="small" @click="imageSubmit">上传头像</el-button>
                                <div style="margin-bottom:70px;padding-top: 30px"><span>{
  
  {uploadDate}}</span></div>
                            </div>
                        </div>
                    </div>

css代码:

#headImg{
        margin-left: 50px;
        .viewPhoto{
            border: 1px rgba(99, 199, 210, 0.79) dashed;
            width: 200px;
            height: 200px;
        }
        #saveImage{
            display: none;
        }
        .save{
            margin: 30px auto;
        }
        .viewPhoto{
            position: relative;
            float: left;
            margin-right: 10%;
        }
        .el-icon-plus{
            font-size: 50px;
            color: rgba(99, 199, 210, 0.79);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            max-width: 50%;
            text-align: center;
        }
    }

js代码:

1.双向绑定数据

  data:{
    	return{
    		 imageSave:"",//图片路径
    		 uploadDate:"",//上传时间
    	}
    }

2.模拟点击input file

//图片库模拟点击input file
         monidianji(){
                document.getElementById('saveImage').click()
         }

3.挂载预览图片

	 mounted(){
                this.yulan();//预览图片
            },
   //实时显示该图片在页面 预览
            yulan(){
                document.getElementById('saveImage').onchange = function () {
                    var imgFile = this.files[0];
                    var fr = new FileReader();
                    fr.onload = function () {
                        document.getElementById('portrait').src = fr.result;
                    };
                    fr.readAsDataURL(imgFile);
                }
            }

4.上传图片

//上传
		 imageSubmit(){
             let _this=this
             let x = document.getElementById('saveImage').files[0];
             let params = new FormData() ; //创建一个form对象
             params.append('file',x,x.name);  //append 向form表单添加数据
         //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
              let config = {headers:{'Content-Type':'multipart/form-data'}};
              //发起ajax请求存放在服务端
              this.$axios.post(api.personHeadImg,params,config)
                    .then(function(res){
                          _this.imageSave = res.data.lujing;
                          let mydate=new Date()
                          _this.uploadDate="上传时间:"+mydate.toLocaleString()
                          _this.$notify({
                                type: 'success',
                                message: '上传成功!',
                                offset:160
                          })
                     }).catch(function (error) {
                           console.log(error);
                           _this.$notify({
                                type: 'warning',
                                message: '上传失败!',
                                offset:160
                            })
                     })
          },
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148359.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • asp判断session是否为空

    asp判断session是否为空1IfSession(“sesName”)=””Then…2IfSession(“sesName”)=EmptyThen…3IfIsEmpty(Session(“sesName”))Then…4IfCint(Session(“sesName”))=0Then… 来自:百度空间

  • java实现定时器的四种方式_java中定时器的实现原理

    java实现定时器的四种方式_java中定时器的实现原理Java定时器在应用开发中,经常需要一些周期性的操作,比如每5分钟执行某一操作等。在WEB项目中可能需要每隔一段时间自动生成静态页,自动检测是否有新邮件,定时自动备份文件等操作。这些都可以通过定时器Timer来解决。这里仅提供定时器的部分方法和说明,静态页生成等操作读者可以通过相关方法自行解决。。。。百度空间贴代码总是很让人头疼,排好的代码拿到这里就出现混乱。(1)Timer.schedule(T…

  • Tomcat配置SSL证书(PFX证书)

    Tomcat配置SSL证书(PFX证书)Symantec提供免费版SSL,可快速免费申请一、什么是SSL(证书)?    SSL证书服务(AlibabaCloudSSLCertificatesService)由阿里云联合多家国内外数字证书管理和颁发的权威机构、在阿里云平台上直接提供的服务器数字证书。您可以在阿里云平台上直接购买、或者免费获取所需类型的数字证书,并一键部署在阿里云…

  • OpenResty 最佳实践学习–实战演习笔记(4)

    本篇简单记录openresty连接redis数据库和缓存的一些东西,也基本上是官网上的一些例子和知识,作为整理方便自己后续回顾!openresty连接redis因为我本地服务器安装了redis,这里只简单记录连接redis的过程!1.启动redis服务[root@localhost ~]# /usr/local/bin/redis-server /root/dufy/redis/redis-3.0.

  • py2exe怎么安装_eclipse设置pydev

    py2exe怎么安装_eclipse设置pydev系统:Windows7Ultimate 64-bits一、安装py2exepy2exe下载链接:http://download.csdn.net/detail/joey_su/6713523二、使用方法新建一个要转换成windows上可执行程序的python脚本,名称为”helloworld.py”,存储路径为D:\Project\Python\hell

  • 配置是如何进行的 configure

    配置是如何进行的 configure

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号