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

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

html代码：

请上传图片

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上传头像/图片并实时显示到页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法相关推荐

ASP.NET MVC3 上传头像图片并截图
关于上传头像并且截图网上应该有很多资料,大多都是JQuery插件,用起来不是很方便本文所介绍的方法将快速完成一个"上传头像图片并截图",只需要修改少量的代码我们先来看看完成后的 ...
Django搭建个人博客：上传头像图片
到目前为止我们的博客处理的都是文字.现代互联网早就进入了"读图"时代,图片的维护.展示也就相当重要. 上一章中预留了avatar字段,用来保存用户上传的头像,现在我们来实现这个功能 ...
小程序上传头像图片裁剪
原文链接:https://blog.csdn.net/qq_41049816/article/details/90604607* 给网上收到的不知道好不好用先收藏着: 小程序涉及到了用户上传头像的 ...
JEECG 上传头像,图片并切割
Jcrop + commons-fieldupload 上传组件上传图片并切割图片上传并完成切割,图片的切割必须在服务器端完成,在客户端是无法进行切割的,至少在目前阶段. 1 母页面 regist ...
vue项目中使用cropperjs实现上传头像并裁切头像大小
效果演示 github的cropperjs文档仓库地址:https://github.com/fengyuanchen/cropperjs 安装cropperjs npm install croppe ...
vue中使用axios post上传头像/图片并实时显示到页面
前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮完成图片的上传成功代码部分有参考他人的写法. html代码: <div id="myPhoto&qu ...
asp.net+js+ajax实现手机移动端页面预览、剪裁、上传头像图片
参考资料:支持移动设备触摸图片裁剪的jQuery插件移动端html <!DOCTYPE html> <html> <head><meta http-equi ...
jQuery点击头像上传头像图片并预览图片
HTML代码 <div class="img_show img_show1"> <img src="img2/img06.jpg&quo ...
html实现选择头像,HTML5实现上传头像图片大小选择（简单实现）
HTML5仿微博图片上传后大小选择,请使用chrom或者FireFox运行.如果报SECURITY_ERR需要把文件放在服务器端.比如nginx里. 1.[代码][HTML]代码 New Docume ...

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

axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法相关推荐

最新文章

热门文章