vue使用element实现上传图片和修改图片功能
前言
开发后台管理项目时,遇到了上传图片的模块,这个比较简单,但是保存后的图片需要编辑就比较麻烦了,自己记录一下,也分享一下,多多指教
一、应用场景
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.编辑代码
1.编辑组件代码
<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>
2.处理获取到的图片路径,并进行处理展示到列表
// 表格编辑按钮 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", }); } }); },
3.编辑图片插件的方法
fileList1 用来放插件变化的图片路径
// 删除图片 imgRemove1(file, fileList) { this.fileList1 = fileList; }, // 上传成功 imgSuccess1(res, file, fileList) { this.fileList1 = fileList; }, // 上传失败 imgError1(res) { this.$message({ type: "error", message: "附件上传失败", }); },
4.获取最后列表存在的图片(上传两张新的图片后,进行打印的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 element上传和修改图片内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/Shuai_YeYe/article/details/124251221
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 这篇文章主要介绍了C#从数据库读取图片并保存的方法,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2021-01-16
- 这篇文章主要介绍了Python 图片转数组,二进制互转操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-09
- 今天小编在这里就来给各位Photoshop的这一款软件的使用者们来说说把古装美女图片转为细腻的工笔画效果的制作教程,各位想知道方法的使用者们,那么下面就快来跟着小编一...2016-09-14
- php如何实现抓取网页图片,相较于手动的粘贴复制,使用小程序要方便快捷多了,喜欢编程的人总会喜欢制作一些简单有用的小软件,最近就参考了网上一个php抓取图片代码,封装了一个php远程抓取图片的类,测试了一下,效果还不错分享...2015-10-30
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮...2013-10-13- 本文章来人大家介绍一个php文件上传类的使用方法,期望此实例对各位php入门者会有不小帮助哦。 简介 Class.upload.php是用于管理上传文件的php文件上传类, 它可以帮...2016-11-25
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 又码了一个周末的代码,这次在做一些关于文件上传的东西。(PHP UPLOAD)小有收获项目是一个BT种子列表,用户有权限上传自己的种子,然后配合BT TRACK服务器把种子的信息写出来...2016-11-25
- 本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下:具体代码如下:<!DOCTYPE html><html><head><meta charset="utf-8"><title>upload</title><link rel="stylesheet...2015-11-24
- 本篇文章主要说明的是与php文件上传的相关配置的知识点。PHP文件上传功能配置主要涉及php.ini配置文件中的upload_tmp_dir、upload_max_filesize、post_max_size等选项,下面一一说明。打开php.ini配置文件找到File Upl...2015-10-21
- Photoshop的这一款软件小编相信很多的人都已经是使用过了吧,那么今天小编在这里就给大家带来了用Photoshop软件制作枪战电影海报的教程,想知道制作步骤的玩家们,那么下面...2016-09-14
- EXCEL数据上传到SQL SERVER中的方法需要注意到三点!注意点一:要把EXCEL数据上传到SQL SERVER中必须提前把EXCEL传到服务器上.做法: 在ASP.NET环境中,添加一个FileUpload上传控件后台代码的E.X: 复制代码 代码如下: if...2013-09-23
- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 图片剪裁是常用的方法,那么如何通过4坐标剪裁图片,本文就详细的来介绍一下,感兴趣的小伙伴们可以参考一下...2021-06-04
- 共享一段使用PHP下载CSS文件中的图片的代码 复制代码 代码如下: <?php //note 设置PHP超时时间 set_time_limit(0); //note 取得样式文件内容 $styleFileContent = file_get_contents('images/style.css'); //not...2013-10-04
- DVWA (Dam Vulnerable Web Application)DVWA是用PHP+Mysql编写的一套用于常规WEB漏洞教学和检测的WEB脆弱性测试程序。包含了SQL注入、XSS、盲注等常见的一些安全漏洞...2016-11-25