脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 修改图片后实时更新

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.js 的插槽（slots）特性为我们构建灵活、可复用的组件提供了强有力的支持,下面我们就来看看Vue如何通过插槽实现高复用组件吧
    2024-11-11
  • 如何在JS文件中获取Vue组件

    如何在JS文件中获取Vue组件

    这篇文章主要介绍了如何在JS文件中获取Vue组件，帮助大家更好的理解和学习前端知识，感兴趣的朋友可以了解下
    2020-09-09
  • Vue export import 导入导出的多种方式与区别介绍

    Vue export import 导入导出的多种方式与区别介绍

    这篇文章主要介绍了Vue export import 导入导出的多种方式与区别介绍，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 在Vue里如何把网页的数据导出到Excel的方法

    在Vue里如何把网页的数据导出到Excel的方法

    这篇文章主要介绍了在Vue里如何把网页的数据导出到Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式示例详解

    vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-11-11
  • vue3 $attrs和inheritAttrs的用法说明

    vue3 $attrs和inheritAttrs的用法说明

    这篇文章主要介绍了vue3 $attrs和inheritAttrs的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue父组件值变化但子组件不刷新的三种解决方案

    vue父组件值变化但子组件不刷新的三种解决方案

    父组件传递给子组件的数据,如果是一个复杂对象（例如一个数组或对象）,那么子组件只会监听对象的引用而不是对象的内容,这意味着当对象的内容发生变化时,子组件不会更新,本文给大家介绍了vue子组件不刷新的三种解决方案,需要的朋友可以参考下
    2024-03-03
  • 基于elementUI实现图片预览组件的示例代码

    基于elementUI实现图片预览组件的示例代码

    这篇文章主要介绍了基于elementUI实现图片预览组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue3中自定义事件总线的实现代码

    Vue3中自定义事件总线的实现代码

    随着 Vue 3 的发布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再适用或有所变化,为了应对这种变化,我们可以选择在 Vue 3 应用中实现自定义的“事件总线”机制,所以本文给大家介绍了Vue3中如何自定义消息总线,需要的朋友可以参考下
    2024-05-05
  • vue3+element 分片上传与分片下载功能实现方法详解

    vue3+element 分片上传与分片下载功能实现方法详解

    这篇文章主要介绍了vue3+element 分片上传与分片下载功能实现方法,结合实例形式详细分析了vue3+element 分片上传与下载相关实现技巧与操作注意事项,需要的朋友可以参考下
    2023-06-06

最新评论