热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue项目中结合ElementUI解决连续上传多张图片及图片编辑问题

本文介绍了在Vue项目中如何结合ElementUI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。

编码都是以需求为导向的,所以编码前一定要弄清楚需要的结果是什么,然后再开始编码。

现在简单的说下需求:如下图所示,点击蓝色的“+”按钮,可以连续生成多个图片上传框,每个图片上传框都是单独上传图片,编辑互不影响。


现在说下我的代码实现过程:

element ui:


转账汇款信息
+




:ref='"upload" + index'
name="img_b"
class="upload-demo"
:action="uploadUrl"
:headers="upload_hearder"
:on-remove='handleRemove'
:on-success='uploadSuc'
:file-list='fileList'
:show-file-list="false">
{{item.up_btn}}


@click="delupload(item,index)">删除


data() {
return {
// 上传成功后的id
uploadId: '',
// 重新上传成功后的id
resetUploadId: '',
// upload控件tag
uploadTag: 0,
// 上传图片文件列表
fileList: [],
upItem: {},
// 所有账号-select
accVal: '1',
// 图片上传框初始数组
datas_upload: [{ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' }],
// 图片初始id数组
imgArryid: [],
}
},
methods: {
// 点击“+”按钮生成图片上传框
addupload() {
this.datas_upload.push({ up_btn: '上传图片', upbtnGroup: false, imgId: '', url: '' })
},
// 获取图片id
getimgId() {
for (var i = 0; i this.imgArryid.push(this.datas_upload[i].imgId)
}
console.log(this.imgArryid, 785)
return this.imgArryid
},
// 图片上传
getUploadTag(item, index) {
// console.log(response, file, fileList, 564)
this.uploadTag = index
console.log(index, 220)
this.upItem = item
},
// 图片上传成功
uploadSuc(response, file, fileList) {
console.log(1230, response, response.id)
console.log(file, fileList, 6630)
// 把图片id添加到 uploadId 数据中
this.datas_upload[this.uploadTag].imgId = response.id
this.uploadId = response.id
this.upItem.up_btn = '重新上传图片'
this.upItem.upbtnGroup = true
var imgs = 'imgs' + this.uploadTag
console.log(this.$refs.imgs, 267)
this.upItem.url = file.url
},
// 上传图片-删除
delupload(item, index) {
console.log(index, 562)
for (var i = 0; i if (i != 0) {
if (index == i) {
this.datas_upload.splice(i, 1)
this.datas_upload[index].imgId = ''
}
} else if (i == 0) {
console.log(index, item, 563)
this.datas_upload[index].imgId = ''
this.datas_upload[index].url = ''
item.up_btn = '上传图片'
item.upbtnGroup = false
}
}
},
// 重新上传-success
resetUploadSuc(response, file, fileList) {
this.resetUploadId = response.id
this.cOnResUploadView= false
this.cOnRessubmitView= true
}
}

注意:像这种可以生成多个数据的,首先想到使用数组的v-for循环遍历来实现,初始化默认有一个图片上传框,那就给数组一个初始化的对象,每当点击按钮就往数组中添加新的对象,利用数据的双向绑定,便能生成相应的dom元素,达到想要的效果。

 



推荐阅读
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • sklearn数据集库中的常用数据集类型介绍
    本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
  • C# WPF自定义按钮的方法
    本文介绍了在C# WPF中实现自定义按钮的方法,包括使用图片作为按钮背景、自定义鼠标进入效果、自定义按压效果和自定义禁用效果。通过创建CustomButton.cs类和ButtonStyles.xaml资源文件,设计按钮的Style并添加所需的依赖属性,可以实现自定义按钮的效果。示例代码在ButtonStyles.xaml中给出。 ... [详细]
  • 本文详细介绍了SQL日志收缩的方法,包括截断日志和删除不需要的旧日志记录。通过备份日志和使用DBCC SHRINKFILE命令可以实现日志的收缩。同时,还介绍了截断日志的原理和注意事项,包括不能截断事务日志的活动部分和MinLSN的确定方法。通过本文的方法,可以有效减小逻辑日志的大小,提高数据库的性能。 ... [详细]
  • 本文介绍了Python高级网络编程及TCP/IP协议簇的OSI七层模型。首先简单介绍了七层模型的各层及其封装解封装过程。然后讨论了程序开发中涉及到的网络通信内容,主要包括TCP协议、UDP协议和IPV4协议。最后还介绍了socket编程、聊天socket实现、远程执行命令、上传文件、socketserver及其源码分析等相关内容。 ... [详细]
  • 本文介绍了在Python3中如何使用选择文件对话框的格式打开和保存图片的方法。通过使用tkinter库中的filedialog模块的asksaveasfilename和askopenfilename函数,可以方便地选择要打开或保存的图片文件,并进行相关操作。具体的代码示例和操作步骤也被提供。 ... [详细]
  • Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断,区分默认命名空间和自定义命名空间,并采用不同的解析方式。其中,bean标签的解析最为复杂和重要。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 向QTextEdit拖放文件的方法及实现步骤
    本文介绍了在使用QTextEdit时如何实现拖放文件的功能,包括相关的方法和实现步骤。通过重写dragEnterEvent和dropEvent函数,并结合QMimeData和QUrl等类,可以轻松实现向QTextEdit拖放文件的功能。详细的代码实现和说明可以参考本文提供的示例代码。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
author-avatar
手机用户2602886817
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有