vue element upload组件 file-list的动态绑定

转载于：https://blog.csdn.net/weixin_44314258/article/details/102487448 (转载并非原创，如有侵权，通知我立马删除)

本文解决，upload组件 file-list的动态绑定list1，list2 …，实现动态添加,相信很多电商后台管理系统都会遇到这个需求，例子如下

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

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

<template><div class="view"><div class="item" v-for="(item,index) in formList" :key="index"><div style="font-size: 14px; color: #606266;line-height: 40px;">相关图片资料</div><el-uploadaction="https://jsonplaceholder.typicode.com/posts/"list-type="picture-card":on-preview="handlePictureCardPreview":on-remove="(file, fileList)=>{return handleRemove(file, fileList, index)}":limit="5":on-exceed="onExceed":file-list="item.pics":on-success="(response, file, fileList)=>{return onSuccess(response, file, fileList, index)}"><i class="el-icon-plus"></i></el-upload><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt /></el-dialog><el-form label-position="top" label-width="80px" :model="item"><el-row :gutter="20"><el-col :span="12"><el-form-item label="活动名称"><el-input v-model="item.name"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="活动链接"><el-input 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:20px">删除</el-button></div><el-button type="success" @click="addItem" style="width:1000px">添加活动</el-button><el-button type="primary" @click="saveItem" style="margin-top:20px;margin-left:0;">保存活动</el-button></div>
</template><script>
export default {name: "HelloWorld",data() {return {dialogImageUrl: "",dialogVisible: false,formList: [{ pics: [] }]};},methods: {// 上传图片onSuccess(response, file, fileList, idx) {// 这里是element的上传地址，对应的name,url,自己打印fileList对照this.formList[idx].pics.push({ name: file.name, url: file.url });},// 移除图片handleRemove(file, fileList, idx) {let Pics = this.formList[idx].pics;Pics.forEach((item, index) => {if (file.name == item.name) {Pics.splice(index, 1);}});},// 查看图片handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},onExceed(file, fileList) {this.$message({type: "warning",message: "最多上传5张"});},// 添加活动addItem() {this.formList.push({ pics: [] });},// 删除活动delItem(idx) {if (this.formList.length > 1) {this.formList.splice(idx, 1);} else this.formList = [{ pics: [] }];},// 保存活动saveItem() {this.$message({type: "success",message: "保存成功,可以刷新下试试回显效果"});console.log(this.formList);localStorage.setItem("formList", JSON.stringify(this.formList));}},created() {this.formList = JSON.parse(localStorage.getItem("formList"))|| [{ pics: [] }];;}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.view {width: 1000px;margin: 0 auto;
}
.item {width: 100%;
}
</style>

主要实现，动态添加多个item，每个item都有对应的多张图文和介绍，可以删除，保存，下次进来可以回显继续编辑，详情展示页可以展示

vue element upload组件 file-list的动态绑定相关推荐

ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
element upload组件 onError神坑记录
element upload组件的onError钩子函数返回错误是一个名为Error的对象但要拿到后台的detail报错必须这么写 const detail = JSON.parse(err.mes ...
vue element隐藏组件滚动条scrollbar使用
pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式. vue Element ...
vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
Vue：自定义组件引入单页面+动态绑定图片
Vue2,Vue3,动态绑定图片通过自定义组件向单页面组件引入普通属性 component文件下的Header.vue: <template><div><h1>{ ...
Vue Element UI 组件化之背景图组件
step1:创建背景图组件 bg.vue 该组件实现: 1.背景图可以自适应屏幕宽度(高度足够适应,不考虑高度) 2.背景图位置固定,不会产生滚动条 3.背景图高度足够高(1920*4092),可以自 ...
ant design vue 清空upload组件图片缓存的方法
当关闭这个窗口后,再次打开,上传上传的图片清空在upload 这个组件外加一个key 赋随机值,便可清除缓存缓存代码如下: <a-modal v-model="visible&qu ...
vue+element 子组件调用父组件失败
项目中遇到vue子组件调用父组件的方法,我写的是this.$emit('search');但是没有成功,查了下说有三种子组件调用父组件的方式: 第一种方法是直接在子组件中通过this.$parent. ...
element upload组件，ctrl v粘贴图片自动上传
产品提了一个需求,需要用户可以在微信或者qq截屏之后,ctrl v直接上传图片,网上查了几篇文章参考了其中一篇实现了参考文章:https://blog.csdn.net/rencaishigepi/ ...

vue element upload组件 file-list的动态绑定

本文解决，upload组件 file-list的动态绑定list1，list2 …，实现动态添加,相信很多电商后台管理系统都会遇到这个需求，例子如下

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

vue element upload组件 file-list的动态绑定相关推荐

最新文章

热门文章