1.功能
2.遍历标签,添加元素
<div
class="mb15 clearfix"
v-for="(item, index) in addnormals"
:key="index"
>
<img :src="item.logoUrl" alt="" class="left ml10 icon_img">
<a href="javascript:;" class="file left">预览
<input type="file" @change="fileimg(index)" :data="item.activityCode" accept="image/gif, image/jpeg, image/png, image/jpg" name="img" class="inputfil">
</a>
<Button type="primary" class="left ml10" style="margin-top:3px" v-if="index==0" @click="addnormal" >+</Button>
<Button type="primary" class="left ml10" style="margin-top:3px" v-if="index!=0" @click="addnorma2(index)">-</Button>
</div>
3.参数的定义
addnormals: [
{
logoUrl:require('../../image/moren.png')
}
]
4.按钮+的函数
addnormal () {
this.index2++
this.addnormals.push({
logoUrl:require('../../image/moren.png')
})
},
// data 中定义index2:1
5.按钮-的函数
addnorma2 (index) {
this.addnormals.splice(index, 1)
},
// splice 定义和用法
// splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
// 语法
// arrayObject.splice(index,howmany,item1,.....,itemX)
// 参数 描述
// index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
// howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
// item1, ..., itemX 可选。向数组添加的新项目。
// 返回值
// 类型 描述
// Array 包含被删除项目的新数组,如果有的话。
// 说明
// splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换
// 那些被删除的元素。
// 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
6. 文件上传的函数
// 上传图片
fileimg (index) {
console.log(document.querySelectorAll('.inputfil')[index].files[0])
if (document.querySelectorAll('.inputfil')[index].files[0].type == '') {
this.addnormals[index].activityCode = ''
this.addnormals[index].logoUrl = require('../../image/moren.png')
this.$Modal.warning({
title: '温馨提示',
content: '请上传正确格式的图片'
});
return false
}
let formData = new FormData();
this.addnormals[index].activityCode = '1'
// document.querySelectorAll('.inputfil')[index].setAttribute('data','1')
formData.append('file', document.querySelectorAll('.inputfil')[index].files[0])
let config = {
headers: {
'Content-Type': 'multipart/form-data'
},
timeout:1000*60*5
}
this.http.post(BASE_URL + '/fileUpload', formData, config)
.then((resp) => {
if (resp.code == 'success') {
this.addnormals[index].logoUrl = resp.data
} else {
}
})
.catch(() => {
})
}
7. 大功告成