vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。
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上传头像/图片并实时显示到页面的更多相关文章
- javascript异步上传压缩图片并立即显示图片
javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...
- $cordovaCamera 插件 上传头像 图片功能
首先要注入 $cordovaCamera 使用相机拍照 var useCamera = function() { var options = { //这些参数可能要配合着使用,比如选择了source ...
- 上传base64图片并压缩
elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- day105:Mofang:设置页面初始化&更新头像/上传头像&设置页面显示用户基本信息
目录 1.设置页面初始化 2.更新头像 1.点击头像进入更新头像界面 2.更新头像页面初始化 3.更新头像页面CSS样式 4.头像上传来源选择:相册/相机 5.调用api提供的本地接口从相册/相机提取 ...
- 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题
HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...
- Laravel中的日志与上传
PHP中的框架众多,我自己就接触了好几个.大学那会啥也不懂啥也不会,拿了一个ThinkPHP学了.也许有好多人吐槽TP,但是个人感觉不能说哪个框架好,哪个框架不好,再不好的框架你能把源码读上一遍,框架 ...
- swift上传头像
很久没有写博客了,今天特地写了这个,也是一边仿照别人写的demo,注释部分都是需要的.需要的同学可以参考一下. @IBAction func headImageBtnPage(){ //上传头像 / ...
- 完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)
现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像. 一.相关技术 若要实现上述的自拍头像和上传头像的功能,会碰到 ...
随机推荐
- 家用电脑架服务器提供web
要搞一个可以对外的web服务,需要服务器,域名.这些都需要money,但有时,我们只是想自己可以在外面访问,或是提供给朋友看自己的网站有多牛.这时使用家用电脑配置一个可以提供web的服务器,就显得很必 ...
- 【BZOJ3450】Easy(期望)
题意: 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a个comb就有a ...
- [Python] 'unicode' object is not callable
在Python中,出现'unicode' object is not callable的错误一般是把字符串当做函数使用了.
- 转自CSDN,关于状态机
有限状态机FSM思想广泛应用于硬件控制电路设计,也是软件上常用的一种处理方法(软件上称为FMM--有限消息机).它把 复杂的控制逻辑分解成有限个稳定状态,在每个状态上判断事件,变连续处理为离散数字处理 ...
- Struts2防止重复提交
一般使用<interceptor-ref name="token"></interceptor-ref>或者<interceptor-ref name ...
- ETCD 单机安装
由于测试的需要,有时需要搭建一个单机版的etcd 环境,为了方便以后搭建查看,现在对单机部署进行记录. 一.部署单机etcd 下载 指定版本的etcd下载地址 ftp://ftp.pbone.net/ ...
- JS --- 数组循环要用length
socket.on("receive", function (data) { deviceone.print("返回的数据:"+data) // 发送异常 va ...
- csu1527: Bounty Hunter
Time Limit:5000MS Memory Limit:131072KB 64bit IO Format:%lld & %llu Submit Status id=134 ...
- hdu 1689 Alien’s Necklace (bfs层次图剪枝)
Alien's Necklace Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- [Testing] Config jest to test Javascript Application -- Part 3
Run Jest Watch Mode by default locally with is-ci-cli In CI, we don’t want to start the tests in wat ...