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连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
前端性能优化建议
Sep 17 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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队列用法实例
2014/11/05 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP会话处理的10个函数
2015/08/11 PHP
Laravel日志用法详解
2016/10/09 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
vue删除html内容的标签样式实例
2018/09/13 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python正则实现提取电话功能
2018/02/24 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
python网络编程之五子棋游戏
2020/05/14 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
正风肃纪剖析材料
2014/02/18 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
初三化学教学反思
2016/02/22 职场文书
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS