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点击tr实现checkbox选中的方法
Mar 19 Javascript
JS上传前预览图片实例
Mar 25 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Vue表单实例代码
Sep 05 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
详解javascript replace高级用法
Feb 17 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 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
PHP 高手之路(一)
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
python+pyqt5实现24点小游戏
2019/01/24 Python
Python3离线安装Requests模块问题
2019/10/13 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
《美丽的小路》教学反思
2014/02/26 职场文书
党员一帮一活动总结
2014/07/08 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
幼儿园开学通知
2015/04/24 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
基于Python实现对比Exce的工具
2022/04/07 Python