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通过Ajax提交表单并返回结果
Jul 31 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
调整小数的格式保留小数点后两位
May 14 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
基于Vue的商品主图放大镜方案详解
Sep 19 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
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
菜鸟修复电子管记
2021/03/02 无线电
JpGraph php柱状图使用介绍
2011/08/23 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
js 函数调用模式小结
2011/12/26 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
js实现自定义右键菜单
2020/05/18 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
早读迟到检讨书
2014/01/24 职场文书
四年大学自我鉴定
2014/02/17 职场文书
学习计划书怎么写
2014/09/15 职场文书
情人节单身感言
2015/08/03 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书