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 相关文章推荐
js动画(animate)简单引擎代码示例
Dec 04 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
JS排序之选择排序详解
Apr 08 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
js中switch语句的学习笔记
Mar 25 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
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python3 assert断言实现原理解析
2020/03/02 Python
教师岗位职责范本
2013/12/29 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
代收款委托书范本
2014/10/01 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
护理培训心得体会
2016/01/22 职场文书
python基础详解之if循环语句
2021/04/24 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python