vue v-for循环el-upload上传图片 动态添加、删除
效果图
js
uploadHeader: { token: "",
userId: ""
},
dialogImageUrl:"",
dialogVisible:false,
RecordOperation:{
imgList:[
// {imgList:[{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""}]},
// {imgList:[{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""}]},
// {imgList:[{url:"",name:""}]},
{
imgList:[
{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
],
content:"ceshi biaoti 111111111111",
type:2
},
{
imgList:[
{url:"",name:""},
],
content:"ceshi biaoti 111111111111",
type:0
},
{
imgList:[],
content:"ceshi 内容 111111111111",
type:1
},
{
imgList:[],
content:"ceshi 标题 2222",
type:0
},
{
imgList:[],
content:"ceshi 内容 2222",
type:1
},
{
imgList:[],
content:"ceshi 内容 333333",
type:1
},
{
imgList:[
{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
],
content:"ceshi biaoti 111111111111",
type:2
},
{
imgList:[],
content:"ceshi biaoti 111111111111",
type:0
},
{
imgList:[],
content:"ceshi biaoti 111111111111",
type:0
},
{
imgList:[],
content:"ceshi biaoti 111111111111",
type:0
},
{
imgList:[
{url:"https://img.jd9sj.com/VFVBTkdPVV8yMDIwLTA3LTEwXzAxZDJhNWViZGIxZjRlZmM5OGY2ZWQ1NmI3NjkzNGZjX3U9MjI5MTYwNTU0OSwyMjMxODkzMTkwJmZtPTI2JmdwPTAuanBn",name:""},
],
content:"ceshi biaoti 111111111111",
type:2
},
]
},
addOperation(type){ this.RecordOperation.imgList.push({imgList:[],content:"",type:type});
},
handleRemove(obj,res,file) {
let arr= this.RecordOperation.imgList;
arr[obj.index].imgList.map((item, index) => {
console.log(item.url)
console.log(res.url)
console.log(this.RecordOperation.imgList[obj.index])
if (res.url) {
if (res.url==item.url) {
if(this.RecordOperation.imgList[obj.index].imgList.length<=1){
this.RecordOperation.imgList.splice(obj.index,1)
}else{
this.RecordOperation.imgList[obj.index].imgList.splice(index, 1)
}
}else if(res.data == item.url){
if(this.RecordOperation.imgList[obj.index].imgList.length<=1){
this.RecordOperation.imgList.splice(obj.index,1)
}else{
this.RecordOperation.imgList[obj.index].imgList.splice(index, 1)
}
}
}
})
console.log(this.RecordOperation.imgList)
},
handlePictureCardPreview(file) {
console.log(file);
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeUploadImageDynamicPic(file){
var _this = this;
var isLt10M = file.size / 1024 / 1024 < 10;
if (['image/jpeg', 'image/png'].indexOf(file.type) == -1) {
_this.$message.error('请上传正确的图片格式');
return false;
}
if (!isLt10M) {
_this.$message.error('上传图片大小不能超过10MB哦!');
return false;
}
},
//动态图上传成功
dynamicPicSuccess(obj,res,file) {
var imgList = this.RecordOperation.imgList
var index = obj.index;
imgList[index].picUrl = res.data;
// 少于5张图时，自动添加一行
if(imgList[index].length<5)
imgList[index].push({content: '', picUrl: ""});
},
// 移除动态建设图片
delDynamicPic(i,list) {
this.$confirm('确认删除该行图片？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
list.splice(i, 1);
});
},
delCurrent(i,list){
list.splice(i, 1);
},
<!--vue文本-->
<el-button type="primary" @click="addOperation('0')">标题+</el-button><el-button type="primary" @click="addOperation('1')">文本+</el-button>
<el-button type="primary" @click="addOperation('2')">上传图片+</el-button>
<div style="max-height:800px;overflow-y:scroll ">
<div v-for="(v,i) in RecordOperation.imgList" :key="i" style="display:flex">
<div>
<span v-if="v.type=='2'" class="editCon">
<el-upload
ref="upload"
:action="'/admin/sales/tuangouPicUpload'"
:headers="uploadHeader"
:limit="5"
:multiple="true"
accept="image/jpeg, image/png"
list-type="picture-card"
:file-list="RecordOperation.imgList[i].imgList"
:before-upload="beforeUploadImageDynamicPic"
:on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove.bind(null, {'index':i,'data':v})"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-button type="text" class="delBtn" @click="delDynamicPic(i,RecordOperation.imgList)">删除图片及添加框</el-button>
</span>
<span v-if="v.type=='0'" class="editCon">
<el-input v-model.trim="v.content" placeholder="请输入标题"></el-input>
<span @click="delCurrent(i,RecordOperation.imgList)" class="delBtn">删除标题</span>
</span>
<span v-if="v.type=='1'" class="editCon">
<el-input v-model.trim="v.content" placeholder="请输入内容"></el-input>
<span @click="delCurrent(i,RecordOperation.imgList)" class="delBtn">删除内容</span>
</span>
</div>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
以上是 vue v-for循环el-upload上传图片 动态添加、删除 的全部内容， 来源链接： utcz.com/z/379741.html
