vue上传图片并预览

全栈程序员站长

发布于 2022-07-02 16:02:42

3.7K0

发布于 2022-07-02 16:02:42

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

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
                            })
                     })
          },

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148359.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

https