您的位置：首页 > Web前端 > Vue.js

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

2019-12-02 18:11 1066 查看

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 图片实时更新

相关文章推荐

新的分享

章节导航