vue使用element 上传图片，修改图片

文章目录

vue使用element 上传图片，修改图片
前言
一、应用场景
- 1.上传图片并进行放大预览
- 2.图片上传代码
二、修改已经上传的图片，并展示到图片列表中
- 1.效果展示（先展示原来的图片，再上传新图片，也可删除原来的图片）
- 2.编辑代码
总结

前言

开发后台管理项目时，遇到了上传图片的模块，这个比较简单，但是保存后的图片需要编辑就比较麻烦了，自己记录一下，也分享一下，多多指教

一、应用场景

1.上传图片并进行放大预览

2.图片上传代码

我这里的实现是直接将图片上传到接口，成功后返回图片路径，表单提交时，后台要路径拼成的字符串格式，类似str=‘/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg,/uploads/20220418/d93905dbcd041a0a88abc72fd34b6c98.jpg’;下面会介绍路径处理方法

     <el-upload:action="上传图片接口地址"list-type="picture-card":on-preview="handlePictureCardPreview":on-success="imgSuccess":on-error="imgError":on-remove="imgRemove"><i class="el-icon-plus"></i></el-upload>

 // 上传成功imgSuccess(res, file, fileList) {this.fileList = fileList;//这里我是用一个fileList数组存取，当保存的时候进行图片路径处理},// 上传失败imgError(res) {this.$message({type: "error",message: "附件上传失败",});},// 删除图片imgRemove(file, fileList) {this.fileList = fileList;},// 附件上传图片预览事件，这个就是将路径直接放进一个弹窗显示出来就可以了handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// 处理图片路径setImgUrl(imgArr) {let arr = [];if (imgArr.length>0) {for (let i = 0; i < imgArr.length; i++) {const element = imgArr[i];arr.push(element.response.data.url);//这个地方根据后台返回的数据进行取值，可以先打印一下}return arr.join();} else {return ''}},

二、修改已经上传的图片，并展示到图片列表中

1.效果展示（先展示原来的图片，再上传新图片，也可删除原来的图片）

2.编辑代码

编辑组件代码

     <el-upload:action="上传图片接口地址"list-type="picture-card":on-preview="handlePictureCardPreview":on-success="imgSuccess1":on-error="imgError1":on-remove="imgRemove1":file-list="fileList2"><i class="el-icon-plus"></i></el-upload>

处理获取到的图片路径，并进行处理展示到列表

 // 表格编辑按钮tableBianji(row) {this.changeTanchuang = true;this.changeId = row.id;let form = { id: row.id };let _this = this;//这是 我自己封装的方法，不用理会，只看图片路径处理即可this.request("url", "GET", form, function (res) {if (res.code == 1) {_this.changeTanchuangForm = res.data;//将字符串转成数组let arr = _this.changeTanchuangForm.up_file.split(",");for (let i = 0; i < arr.length; i++) {//创建对象，并将路径进行ip地址拼接let obj = {      url: _this.requestUrl + arr[i],};//放进图片列表_this.fileList2.push(obj);}} else {_this.$message({message: res.msg,type: "error",});}});},

编辑图片插件的方法
fileList1 用来放插件变化的图片路径

// 删除图片imgRemove1(file, fileList) {this.fileList1 = fileList;},// 上传成功imgSuccess1(res, file, fileList) {this.fileList1 = fileList;},// 上传失败imgError1(res) {this.$message({type: "error",message: "附件上传失败",});},

获取最后列表存在的图片（上传两张新的图片后，进行打印的this.fileList1）

// 先判断图片是否更改if (this.fileList1.length==0) {//如果为0，则表示没有对图片进行编辑，则不用更改任何东西} else {//图片进行了一些操作，包括删除、新增；let arr = [];// 判断是否是新上传的this.fileList1.map((item,index)=>{if (item.response) {//是新上传的，将路径放进数组arr.push(item.response.data.url)} else {//原来存在的，将路径进行截取后放进数组let str = '/uploads'+item.url.split('/uploads')[1];arr.push(str)}})//处理后的路径字符串let up_file = arr.join(',')}

总结

就是使用vue结合element进行图片上传和编辑的一个操作，主要就是对图片路径的处理，这里可能你的有些路径是和我的不一样的，这个是根据后台返回的格式决定的，可以多打印几次。OVER

vue使用element 上传图片，修改图片相关推荐

vue用form上传图片_vue图片上传
vue实现图片上传的三种方法 1.使用elementui框架实现图片上传 :accept="'image/*'"//接受上传的[文件类型] :action="上传的接口地 ...
vue+element上传图片到阿里云（可直接运行domo）
vue+element上传图片到阿里云,OSS(最简单,最详细,可在线运行domo),不要走弯路了支持格式 jpeg,jpg,png,webp,gif =可限制大小== 4M 安装ali-oss n ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
springMVC MultipartFile 上传图片时修改图片大小
1.引言服务器配置比较低,打开网站时加载1MB+的图片速度很慢,影响客户体验.所以从网上找了java修改图片大小的方法,这里记录一下以备以后不时之需.我这里设置的是宽240,,高135 按照16 ...
Vue中鼠标悬停更换图片/文字内容，动态展示/修改某些属性
Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性鼠标悬停时:@mouseenter 鼠标离开时:@mouseleave 利用以上来绑定相应方法,例如: <div @mouseleav ...
vue实现echarts树图修改节点图片，修改连线颜色，鼠标悬停显示详情，鼠标右键弹出菜单，搜索，导出PNG，高亮，查看节点是否还有子节点，修改树图的展示方式
其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章首先,实现效果入下图: ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
Vue +vue-quill-editor+ Element UI使用富文本编辑器(后续更新上传视频、链接、表格....)
如果你们有问题,可以发评论提问,我看见一定回复!!!!! 文章目录一.基本使用 1.下载vue-quill-editor组件 2.引入· 富文本组件 3.工具栏相关配置 4.设置工具栏中文提示 5. ...
element upload预览_vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML class="avatar-uploader" action=&q ...

vue使用element 上传图片，修改图片

vue使用element 上传图片，修改图片

文章目录

前言

一、应用场景

1.上传图片并进行放大预览

2.图片上传代码

二、修改已经上传的图片，并展示到图片列表中

1.效果展示（先展示原来的图片，再上传新图片，也可删除原来的图片）

2.编辑代码

总结

vue使用element 上传图片，修改图片相关推荐

最新文章

热门文章