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

相关文章

  • vue3 el-select懒加载以及自定义指令方式

    vue3 el-select懒加载以及自定义指令方式

    这篇文章主要介绍了vue3 el-select懒加载以及自定义指令方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue3 封装 element-plus 图标选择器实现步骤

    Vue3 封装 element-plus 图标选择器实现步骤

    这篇文章主要介绍了Vue3 封装 element-plus 图标选择器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vue生命周期四个阶段created和mount详解

    vue生命周期四个阶段created和mount详解

    这篇文章主要介绍了vue生命周期四个阶段created和mount,本文给大家介绍的非常详细,补充介绍了什么是实例,什么是实例被挂载到DOM,什么是dom,dao操作又是什么,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • vue路由传参接收以及传参对象为对象时的问题及解决

    vue路由传参接收以及传参对象为对象时的问题及解决

    这篇文章主要介绍了vue路由传参接收以及传参对象为对象时的问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • VUE插件vue-treeselect的使用及说明

    VUE插件vue-treeselect的使用及说明

    这篇文章主要介绍了VUE插件vue-treeselect的使用及说明,具有很好的参考价值,希望对大家有所帮助。
    2023-07-07
  • 详解Vue webapp项目通过HBulider打包原生APP

    详解Vue webapp项目通过HBulider打包原生APP

    这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue中$nextTick实现源码解析

    Vue中$nextTick实现源码解析

    这篇文章主要为大家介绍了Vue中$nextTick实现源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • Vue中响应式系统实现原理图文讲解

    Vue中响应式系统实现原理图文讲解

    Vue的响应式实现是借助Object.defineProperty通过重写getter和setter方法来进行的数据劫持,Vue3通过Proxy代理拦截对象中任意属性的变化,通过Reflect反射对源对象的属性进行操作,然后再在get里收集依赖在set里派发更新
    2023-03-03
  • vue Render中slots的使用的实例代码

    vue Render中slots的使用的实例代码

    本篇文章主要介绍了vue Render中slots的使用的实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-07-07
  • vue的for循环使用方法

    vue的for循环使用方法

    在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤,有需要的朋友们跟着学习下。
    2019-02-02

最新评论