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)


相关推荐

发表回复

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

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