vue实现修改图片后实时更新


Posted in Javascript onNovember 14, 2019

1、vue图片上传,使用element UI 上传组件自己写

<el-upload
  action="string"
  :http-request="uploadImg"
  :show-file-list="false">
  <el-button v-perm="'b:img:upload'" size="small" type="primary">点击上传</el-button>
</el-upload>
<div class="imgStyle mar_top10">
  <img width="100%" :src="dialogImageUrl" alt="">
</div>

2、上传图片,并实时更新修改过后的图片

method : {
  uploadImg(item) {
   var isFlag = (item.file.type == 'image/jpeg' || item.file.type == 'image/png')? true : false;
   if(!isFlag){
    this.$message({
     type: 'warning',
     message: '上传图片只能是 JPG、PNG 格式!'
    })
    return false
   }
   let formData = new FormData();
   formData.append('file', item.file);//若查看可使用 formData.get('file')
   api.updateShareBack(formData).then(res => {
    var res = res.data;
    if(res.code == 200){
     this.$message({
      type: 'success',
      message: '上传成功'
     })
     this.dialogImageUrl = res.data + '?' + new Date().getTime();//new Date().getTime()使用时间戳更换每次的修改的图片
    }
   })
  }
}

以上这篇vue实现修改图片后实时更新就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
js中将URL中的参数提取出来作为对象的实现代码
Aug 16 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
Node.js简单入门前传
Aug 21 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
Vue中img的src是动态渲染时不显示的解决
Nov 14 #Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 #jQuery
vue-cli3.X快速创建项目的方法步骤
Nov 14 #Javascript
vue.config.js常用配置详解
Nov 14 #Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 #Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 #Javascript
Node绑定全局TraceID的实现方法
Nov 14 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
PHP操作xml代码
2010/06/17 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
PyQt5响应回车事件的方法
2019/06/25 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Pytorch evaluation每次运行结果不同的解决
2020/01/02 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
优秀中专生推荐信
2013/11/17 职场文书
英语自荐信范文
2013/12/11 职场文书
广告语设计及教案
2014/03/21 职场文书
广播节目策划方案
2014/05/23 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
学校督导评估方案
2014/06/10 职场文书
学校与家长安全责任书
2014/07/23 职场文书
人大调研汇报材料
2014/08/14 职场文书
销售会议开幕词
2015/01/28 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python