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()使用时间戳更换每次的修改的图片
        }
      })
    }
}

猜你喜欢

转载自blog.csdn.net/lilongwei4321/article/details/82883839