vue元素上传组件文件列表的动态绑定实现

本文解决，上传组件文件列表的动态绑定清单1、清单2.实现动态添加，相信很多电商后台管理系统都会遇到这个需求，例子如下

本例，我是使用的上传默认的上传地址（很多图片不能上传，你可以在本地截几张图片，进行测试),我可以上传多张活动图片，可以加相应的，名称，链接描述等，如果有多个活动，可以点击添加活动，在第二个活动又能添加相应的内容，保存完之后，可以实现回显，活动详情页可以看到添加的几个活动和相应的活动内容。

实现方法不为一，这是一种特别简单的。代码如下

formList ' : key=' index ' div style=' font-size : 14px '中的模板div class=' view ' div class=' item ' v-for='(item，index)；颜色： # 606266线高： 40px相关图片资料/div El-上传操作=' https://jsonplaceholder。类型代码。com/post/' list-type=' picture-card ' : on-preview=' handlepicturecard preview ' : on-remove='(文件，文件列表)={返回手柄移除(文件，文件列表，索引)} ' :限制=' 5 ' : on-over=' onExceed ' : file-list=' item。pics ' :0活动名称El-输入v-model=' item。名称/El-输入/El-表单-项目/El-col El-col : span=' 12 ' El-表单-项目标签='活动链接El-输入v-model=' item。content/El-input/El-form-item/El-col/El-row/El-form El-button type=' danger ' @ click=' delItem(index)' style=' margin-bottom :20 px '删除/el按钮/div el按钮类型=' success ' @ click=' addItem ' style=' width :1000 px '添加活动/El-button El-button类型=' primary ' @ click=' SaveItem ' style=' margin-top :20 px；左边距-:0;'保存活动/El-button/div/template脚本导出默认值{ name : ' hello world '，data(){ return { dialogimageurl : ' '，dialogVisible: false，formlist :[{ pics 3360[]}]} } }；}，methods: { //上传图片成功时(响应、文件、文件列表、idx) { //这里是元素的上传地址，对应的名称，网址，自己打印文件列表对照这个。formlist[idx]。照片。push({ name :文件。名称，URL :文件。URL })；}, //移除图片handleRemove(文件、文件列表、idx){ 0让Pics=this.formList[idx].图片；Pics.forEach((项，索引)={ if(文件。name==item。名称){ pics。拼接(索引，1)；} });}, //查看图片handlePictureCardPreview(文件){这个。dialogimageurl=文件。网址；this.dialogVisible=true}，onExceed(文件，文件列表){这个.$message({ type: 'warning '，message: '最多上传5张' });}, //添加活动addItem(){ this。表单列表。push({ pics :[]})；}, //删除活动delItem(idx){ if(this。表单列表。长度1){这个。表单列表。拼接(idx，1)；}还有这个。form list=[{ pics :[]}]；}, //保存活动saveItem() { this .$message({ type: 'success '，message: '保存成功，可以刷新下试试回显效果' });控制台。日志(这个。form list)；localStorage.setItem('formList '，JSON。stringify(这个。formList))；} }，创建了(){ this。formList=JSON。解析(LocalStorage。GetItem(' formList ')| |[{ pics 3360[]}]；}};/脚本！-添加"作用域"属性，将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-样式范围。视图{ width : 1000 pxmargin : 0 auto }。项目{宽度： 100%；}/样式主要实现，动态添加多个项目，每个项目都有对应的多张图文和介绍，可以删除，保存，下次进来可以回显继续编辑，详情展示页可以展示

Github地址，你可以克隆下来，在本地运行

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。