vue脚手架-上传图片编辑修改图片（三）

需求，点击编辑图案的时候，需要弹出框，里面除了能修改图片信息之外，还得能够更换图片。
此篇文章主要讲述如何更换图片，，因为时更改单张图片的，所以特别想更换头像有没有，因此我使用了element ui中的更换头像的插件来写的。

H5中更换图片的部分

        <el-upload:http-request="upLoad":action="upload.action":show-file-list="false":on-success="handleAvatarSuccess"><imgv-if="editForm.dialogImageUrl" //这里写个判断，如果没有更换图片 那么就是显示原来的啦:src="editForm.dialogImageUrl"class="dialogPic"></el-upload>

data里面

editForm: {dialogImageUrl: '',  //这个显示图片的地址，是在on-success中获得的，如何获得 element 中有说picName: '',picLink: '',editbanner: '',imageFile: '' //这个更换图片后 那个图片的文件},

methods中

  // 更换照片-上传头像async upLoad (file) {// 把新的图片文件存到editForm中this.editForm.imageFile = file.file},// 更换照片-上传成功后handleAvatarSuccess (res, file) {this.editForm.dialogImageUrl = URL.createObjectURL(file.raw)},

vue脚手架-上传图片编辑修改图片（三）相关推荐

vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
springMVC MultipartFile 上传图片时修改图片大小
1.引言服务器配置比较低,打开网站时加载1MB+的图片速度很慢,影响客户体验.所以从网上找了java修改图片大小的方法,这里记录一下以备以后不时之需.我这里设置的是宽240,,高135 按照16 ...
vue实现上传图片和显示图片
上传图片并显示点击上传文件的input的时候,将图片上传到页面上,并且显示已经上传的图片,同时也可以保存到后台 // 因为input的上传按钮,会显示的比较突兀,所以在点击div的时候判断是否存在了 ...
vue之原生上传图片并压缩图片大小（1）
vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小这里使用的是 compressorjs , 安装 npm i compressorjs 注意:这个插件是 ...
Vue脚手架工程 - 新建项目时注意事项、与配置工程时经验总结
文章目录新建脚手架工程配置vue.config.js文件启动项目时自启动浏览器编辑演示关闭eslint检验编辑演示 less语法爆红组件名异常解决方案安装vue-router 别忘了 ...
Vue学习（三）—— vue脚手架
文章目录第三部分使用vue脚手架一.介绍及安装 1.概述 2.安装步骤 3.备注 4.模板项目结构 5.关键代码 5.1 index.html 5.2 main.js 5.3 App.vue 5 ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
Vue第三部分(1)：Vue脚手架构建过程详细介绍和案例
Vue-CLI 基本使用命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算 ...
如何编辑图片？图片如何编辑修改？
日常工作中很多情况是需要进行图片处理的,如果我们没合适图片编辑工具,处理图片可能就有些困难了,下载的处理图片软件操作难度过高,上手比较难.其实可以选择在线图片编辑(https://www.yasuot ...

vue脚手架-上传图片编辑修改图片（三）

vue脚手架-上传图片编辑修改图片（三）相关推荐

最新文章

热门文章

vue脚手架-上传图片 编辑修改图片（三）

vue脚手架-上传图片 编辑修改图片（三）相关推荐

最新文章

热门文章

vue脚手架-上传图片编辑修改图片（三）

vue脚手架-上传图片编辑修改图片（三）相关推荐