elementui实现图片上传,element 上传图片
前几天做了一个图片上传功能。下面文章主要介绍vue使用element上传和修改图片功能的相关信息。通过示例代码非常详细的介绍，有需要的朋友可以参考一下。
目录
前言1。应用场景1。上传图片并放大预览。2.上传图片的代码。2.修改上传的图片并显示在图片列表中。1.展示效果(先展示原图，再上传新图，或者删除原图)。2.编辑代码摘要。
前言
在开发后台管理项目的时候，遇到了上传图片的模块，比较简单，但是编辑保存的图片比较麻烦。请自己记录下来分享，并给我你的评价。
一、应用场景
1.上传图片并进行放大预览
2.图片上传代码
我这里的实现是直接上传图片到界面，成功后返回图片路径。表单提交时，后台需要路径拼写的字符串格式，类似str=/uploads/20220418/d 93905 dbcd 041 a 0a88abC72fd34b6c98.jpg、/uploads/20220418/d 93905 dbcd 041 a 0a 88 ABC 72 FD 34 b 6 c 98 . jpg、/uploads/202220418/d 93905 dbcd 041 a 0a 88 ABC 72 FD 34 b 6 c 98 . jpg ；下面将描述路径处理方法。
El-上传
:action=“上传图片的接口地址”
list-type=图片卡
:on-preview= handlePictureCardPreview
:on-success=imgSuccess
:on-error=imgError
:on-remove=imgRemove
i class=el-icon-plus/i
/El-上传
//上传成功
imgSuccess(res，file，fileList) {
this . file list=file list；
//这里我用一个fileList数组来访问和处理保存时的图像路径。
},
//上传失败
图像错误(res) {
这个。$message({
类型：“错误”，
消息：“附件上传失败”，
});
},
//删除图片
imgRemove(文件，文件列表){
this . file list=file list；
},
//附件上传图片预览事件，这是把路径直接放到一个弹出窗口中显示。
handlePictureCardPreview(文件){
this . dialogimageurl=file . URL；
this.dialogVisible=true
},
//处理图片路径
setImgUrl(imgArr) {
设arr=[]；
if (imgArr.length0) {
for(设I=0；i imgArr.lengthi ) {
const element=im garr[I]；
arr . push(element . response . data . URL)；
//这个地方根据后台返回的数据取值，可以先打印出来。
}
返回arr . join()；
}否则{
返回“”
}
},
二、修改已经上传的图片，并展示到图片列表中
1.效果展示（先展示原来的图片，再上传新图片，也可删除原来的图片）
2.编辑代码
1.编辑组件代码
El-上传
:action=“上传图片的接口地址”
list-type=图片卡
:on-preview= handlePictureCardPreview
:on-success=imgSuccess1
:on-error=imgError1
:on-remove=imgRemove1
:file-list=fileList2
i class=el-icon-plus/i
/El-上传
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(设I=0；长度；i ) {
//创建对象并拼接路径的ip地址。
让obj={
url: _this.requestUrl arr[i]，
};
//放在图片列表里
_ this . filelist 2 . push(obj)；
}
}否则{
_这个。$message({
消息：res.msg，
类型：“错误”，
});
}
});
},
3.如何编辑图片插件？
File1用于放置插件修改的图像路径。
//删除图片
imgRemove1(文件，文件列表){
this . file list 1=file list；
},
//上传成功
imgSuccess1(res，file，fileList) {
this . file list 1=file list；
},
//上传失败
imgError1(res) {
这个。$message({
类型：“错误”，
消息：“附件上传失败”，
});
},
4.获取最后一个列表中存在的图片(上传两张新图片后，打印this.fileList1)
//先判断图片是否有改动。
if (this.fileList1.length==0) {
//如果是0，说明图片没有经过编辑，所以不需要修改什么。
}否则{
//对图片进行了一些操作，包括删除和添加；
设arr=[]；
//确定是否是新上传的。
this.fileList1.map((item，index)={
if (item.response) {
//是新上传的，把路径放入数组
arr . push(item . response . data . URL)
}否则{
//现有的，截取路径放入数组。
let str=/uploads item . URL . split(/uploads )[1]；
arr.push(字符串)
}
})
//处理后的路径字符串
let up_file=arr.join(，)
}
总结
是利用vue结合元素上传编辑图片的操作，主要是图片路径的处理。这里你的一些路径可能和我的不一样，这个是根据后台返回的格式决定的，你可以多打印几次。超过
关于vue使用element上传和修改图片的文章到此结束。有关vue元素上传和修改图像的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。