如何用Vue实现图片修改后实时更新显示效果？
- 内容介绍
- 文章标签
- 相关推荐
本文共计324个文字，预计阅读时间需要2分钟。
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-upload div class= // 上传组件容器样式
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实现修改图片后实时更新就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计324个文字，预计阅读时间需要2分钟。
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-upload div class= // 上传组件容器样式
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实现修改图片后实时更新就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。