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 相关文章推荐
javascript的数据类型、字面量、变量介绍
May 23 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
js实现表格单列按字母排序
Aug 12 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
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
php微信开发自定义菜单
2016/08/27 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
Cookie 小记
2010/04/01 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
js实现随机点名功能
2020/12/23 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
华为慧通面试题
2012/09/11 面试题
linux面试题参考答案(7)
2012/10/29 面试题
大学毕业感言50字
2014/02/07 职场文书
物流业务员岗位职责
2014/02/08 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书