在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。

html代码:

  1.  
    <div id="myPhoto" v-show="personalPhoto">
  2.  
    <div class="viewPhoto">
  3.  
    <img src="" alt="" id="portrait"style="width: 300px;height: 300px" />
  4.  
    </div>
  5.  
    <div class="listBox">
  6.  
    <dl>
  7.  
    <dt>请上传图片</dt>
  8.  
    <dd>
  9.  
    <input type="file"id="saveImage" name="myphoto" >
  10.  
    </dd>
  11.  
    </dl>
  12.  
    </div>
  13.  
    <div class="save">
  14.  
    <input type="button" value="保存图片" @click="imageSubmit">
  15.  
    </div>
  16.  
    </div>

js代码:

  1.  
    //实时显示该图片在页面
  2.  
     great(){
  3.  
    document.getElementById('saveImage').onchange = function () {
  4.  
    var imgFile = this.files[0];
  5.  
    var fr = new FileReader();
  6.  
    fr.onload = function () {
  7.  
    document.getElementById('portrait').src = fr.result;
  8.  
    };
  9.  
    fr.readAsDataURL(imgFile);
  10.  
    }
  11.  
    },

js代码部分说明:因为是在vue的methods方法中申明的函数,所以还需要在mounted 方法中使用this.great()挂载该方法。

图片上传部分的js代码:

  1.  
    imageSubmit(){
  2.  
    let x = document.getElementById('saveImage').files[0];
  3.  
    console.log(x);
  4.  
    let params = new FormData() ; //创建一个form对象
  5.  
    params.append('file',x,x.name); //append 向form表单添加数据
  6.  
    //添加请求头 通过form添加的图片和文件的格式必须是multipart/form-data
  7.  
    let config = {
  8.  
    headers:{'Content-Type':'multipart/form-data'}
  9.  
    };
  10.  
    this.$axios.post("/user/image",params,config)
  11.  
    .then(function(res){
  12.  
    console.log(res);
  13.  
    this.imageSave = res.data.image;
  14.  
    sessionStorage.setItem('headImg',this.imageSave); //将图片保存,并能够在其他地方加载显示
  15.  
    router.go(0); //刷新页面,头像改变
  16.  
    }.bind(this))
  17.  
    .catch(function (error) {
  18.  
    console.log(error);
  19.  
    })
  20.  
    }
  21.  
    },

最终效果图:

注:在后来的开发过程中发现,上传图片在上传服务器前在页面加载可以使用

var windowURL = window.URL || window.webkitURL;

vue中使用axios post上传头像/图片并实时显示到页面的更多相关文章

  1. javascript异步上传压缩图片并立即显示图片

    javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...

  2. $cordovaCamera 插件 上传头像 图片功能

    首先要注入  $cordovaCamera 使用相机拍照 var useCamera = function() { var options = { //这些参数可能要配合着使用,比如选择了source ...

  3. 上传base64图片并压缩

    elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...

  4. vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案

    现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...

  5. day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息

    目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...

  6. 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

    HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...

  7. Laravel中的日志与上传

    PHP中的框架众多,我自己就接触了好几个.大学那会啥也不懂啥也不会,拿了一个ThinkPHP学了.也许有好多人吐槽TP,但是个人感觉不能说哪个框架好,哪个框架不好,再不好的框架你能把源码读上一遍,框架 ...

  8. swift上传头像

    很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){  //上传头像 / ...

  9. 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)

    现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...

随机推荐

  1. 家用电脑架服务器提供web

    要搞一个可以对外的web服务,需要服务器,域名.这些都需要money,但有时,我们只是想自己可以在外面访问,或是提供给朋友看自己的网站有多牛.这时使用家用电脑配置一个可以提供web的服务器,就显得很必 ...

  2. 【BZOJ3450】Easy(期望)

    题意: 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个comb就有a ...

  3. [Python] 'unicode' object is not callable

    在Python中,出现'unicode' object is not callable的错误一般是把字符串当做函数使用了.

  4. 转自CSDN,关于状态机

    有限状态机FSM思想广泛应用于硬件控制电路设计,也是软件上常用的一种处理方法(软件上称为FMM--有限消息机).它把 复杂的控制逻辑分解成有限个稳定状态,在每个状态上判断事件,变连续处理为离散数字处理 ...

  5. Struts2防止重复提交

    一般使用<interceptor-ref name="token"></interceptor-ref>或者<interceptor-ref name ...

  6. ETCD 单机安装

    由于测试的需要,有时需要搭建一个单机版的etcd 环境,为了方便以后搭建查看,现在对单机部署进行记录. 一.部署单机etcd 下载 指定版本的etcd下载地址 ftp://ftp.pbone.net/ ...

  7. JS --- 数组循环要用length

    socket.on("receive", function (data) { deviceone.print("返回的数据:"+data) // 发送异常 va ...

  8. csu1527: Bounty Hunter

    Time Limit:5000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu Submit Status id=134 ...

  9. hdu 1689 Alien’s Necklace (bfs层次图剪枝)

    Alien's Necklace Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  10. [Testing] Config jest to test Javascript Application -- Part 3

    Run Jest Watch Mode by default locally with is-ci-cli In CI, we don’t want to start the tests in wat ...