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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
React中的render何时执行过程
Apr 13 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
Python lambda和Python def区别分析
2014/11/30 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
win10安装python3.6的常见问题
2020/07/01 Python
如何清空python的变量
2020/07/05 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
党员民主生活会整改措施
2014/09/26 职场文书
店长岗位职责
2015/02/11 职场文书
学术会议领导致辞
2015/07/29 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
学习nginx基础知识
2021/09/04 Servers
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技