vue中使用axios post上传头像/图片并实时显示到页面的方法
2018-09-27 08:40
1811 查看
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。
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); }) } },
最终效果图:
注:在后来的开发过程中发现,上传图片在上传服务器前在页面加载可以使用
var windowURL = window.URL || window.webkitURL;
以上这篇vue中使用axios post上传头像/图片并实时显示到页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 基于VUE选择上传图片并页面显示(图片可删除)
- UWP 使用Windows.Web.Http命名空间下的HttpClient使用post方法,上传图片服务器
- 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
- Android使用post方式上传图片到服务器的方法
- JSP页面使用文件上传图片并且回传显示的注意事项
- Android使用post方式上传图片到服务器的方法
- struts2中使用Blob类型处理图片上传保存在数据库中并在JSP页面中显示图片
- 使用Form验证,未登录时登录页面无法显示图片、css、js文件的解决方法
- vue实现的上传图片到数据库并显示到页面功能示例
- 上传图片时实时显示功能使用uploadPreview.js
- vue使用axios实现文件上传进度的实时更新详解
- c# asp.net 使用kindeditor在服务器上不能显示上传图片的页面等解决办法
- 头像“截取”,图片使用居中显示,在头像跟上传中应该用的到
- 在 Vue 结合 Axios 使用过程 中 post 方法,后台无法接受到数据问题
- 基于VUE选择上传图片并在页面显示(图片可删除)
- input 标签如何multiple 上传多张图片 实时在页面显示图片
- vue-cli的axios使用方法,get、post请求的跨域问题解决
- Android使用post方式上传图片到服务器的方法
- vue项目中使用axios上传图片等文件操作
- 关于使用ueditor编辑器--ueditor文件夹与编辑器初始化页面不在同一目录下,上传图片显示问题