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

 更新时间:2019年11月14日 09:42:24   作者:lilongwei4321  
今天小编就为大家分享一篇vue实现修改图片后实时更新,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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实现修改图片后实时更新就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue组件之间的通信方式详细讲解

    Vue组件之间的通信方式详细讲解

    对于vue来说,组件之间的消息传递是非常重要的,用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用,一般来说,组件之间可以有几种关系,下面是我对组件之间消息传递的常用方式的总结
    2022-08-08
  • vue 运用mock数据的示例代码

    vue 运用mock数据的示例代码

    本篇文章主要介绍了vue 运用mock数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue组件值变化但不刷新强制组件刷新的问题

    vue组件值变化但不刷新强制组件刷新的问题

    这篇文章主要介绍了vue组件值变化但不刷新强制组件刷新的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中遇到的坑之变化检测问题(数组相关)

    vue中遇到的坑之变化检测问题(数组相关)

    这篇文章主要介绍了vue中遇到的坑之变化检测问题(数组相关) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue中使用elementUI组件手动上传图片功能

    vue中使用elementUI组件手动上传图片功能

    Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。这篇文章主要介绍了vue中使用elementUI组件手动上传图片,需要的朋友可以参考下
    2019-12-12
  • Vue3状态管理的使用详解

    Vue3状态管理的使用详解

    这篇文章主要介绍了Vue3状态管理的使用详解,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • $router.push()中通过path跳转和通过name跳转区别解析

    $router.push()中通过path跳转和通过name跳转区别解析

    今天在路由跳转传参时发现params传参接收到的总是为空,才发现通过path和name传参是有区别的,这篇文章主要介绍了$router.push()中通过path跳转和通过name跳转有什么区别,需要的朋友可以参考下
    2023-11-11
  • vue组件命名和props命名代码详解

    vue组件命名和props命名代码详解

    在本篇内容里小编给大家讲的是关于vue组件命名和props命名的相关知识点内容,有兴趣的朋友们可以学习下。
    2019-09-09
  • vue 递归组件的简单使用示例

    vue 递归组件的简单使用示例

    这篇文章主要介绍了vue 递归组件的简单使用示例,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-01-01
  • vue实现tab路由切换组件的方法实例

    vue实现tab路由切换组件的方法实例

    这篇文章主要给大家介绍了关于vue实现tab路由切换组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论