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 多浏览器分别判断代码
Apr 01 Javascript
javascript cookies 设置、读取、删除实例代码
Apr 12 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
索趣科技的答案
2007/02/07 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
粗加工管理制度
2014/02/04 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
诚实守信演讲稿
2014/09/01 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技