vue中使用axios post上传头像/图片并实时显示到页面的方法


Posted in Javascript onSeptember 27, 2018

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

html代码:

<div id="myPhoto" v-show="personalPhoto">
 <div class="viewPhoto">
  <img src="" alt="" id="portrait"style="width: 300px;height: 300px" />
 </div>
 <div class="listBox">
  <dl>
  <dt>请上传图片</dt>
  <dd>
  <input type="file"id="saveImage" name="myphoto" >
  </dd>
  </dl>
 </div>
 <div class="save">
  <input type="button" value="保存图片" @click="imageSubmit">
 </div>
 </div>

js代码:

//实时显示该图片在页面
 great(){
  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);
  }
 },

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

图片上传部分的js代码:

imageSubmit(){
  let x = document.getElementById('saveImage').files[0];
  console.log(x);
  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'}
  };
  this.$axios.post("/user/image",params,config)
  .then(function(res){
  console.log(res);
  this.imageSave = res.data.image;
  sessionStorage.setItem('headImg',this.imageSave); //将图片保存,并能够在其他地方加载显示
  router.go(0); //刷新页面,头像改变
  }.bind(this))
  .catch(function (error) {
  console.log(error);
  })
 }
 },

最终效果图:

vue中使用axios post上传头像/图片并实时显示到页面的方法

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

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

以上这篇vue中使用axios post上传头像/图片并实时显示到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
Aug 15 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 #Javascript
axios 封装上传文件的请求方法
Sep 26 #Javascript
axios取消请求的实践记录分享
Sep 26 #Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 #Javascript
在vue中获取token,并将token写进header的方法
Sep 26 #Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 #Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 #Javascript
You might like
解析php中die(),exit(),return的区别
2013/06/20 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
mongodb和php的用法详解
2019/03/25 PHP
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Django models filter筛选条件详解
2020/03/16 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
如何转换一个字符串到enum值
2014/04/12 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
离婚协议书范本
2015/01/26 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python