例如有些时候需要上传多张图片，但是并不确定留下几个图片位，这是我们就想手动添加图片位，从而实现自定义数量图片的上传。我们以广告上传为例，上传多个广告。
1.仿照分类组件编写广告位模块
AdSet.vue:
<template>
<div>
<h1>{{id ? '编辑' : '创建'}}广告位</h1>
<el-form label-width="100px" style="margin-top:20px;" @submit.native.prevent="save">
<el-form-item label="广告位名称">
<el-input v-model="model.name"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
id: {}
},
data(){
return {
model: {},
}
},
methods: {
async save(){
let res
if(this.id){
res = await this.$http.put('rest/ads/' + this.id, this.model)
}else{
res = await this.$http.post('rest/ads', this.model)
}
console.log("en?",res)
this.$router.push('/ads/list')
this.$message({
type: 'success',
message: '保存成功'
})
},
async fetch(){
const res = await this.$http.get('rest/ads/' + this.id)
this.model = res.data
}
},
created(){
this.id && this.fetch()
}
}
</script>AdList.vue:
<template>
<div>
<h1>分类列表</h1>
<el-table :data="items">
<el-table-column prop="_id" label="ID" width="220">
</el-table-column>
<el-table-column prop="parent.name" label="上级分类">
</el-table-column>
<el-table-column prop="name" label="分类名称">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click="$router.push('/ads/edit/' + scope.row._id)">编辑</el-button>
<el-button @click="remove(scope.row)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
items: []
}
},
methods: {
async fetch(){
const res = await this.$http.get('rest/ads')
this.items = res.data
},
remove(row){
this.$confirm('是否确定要删除分类"' + row.name + '"?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await this.$http.delete('rest/ads/' + row._id)
this.$message({
type: 'success',
message: '删除成功!'
});
if(res.status == 200){
this.fetch()
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
created() {
this.fetch()
}
}
</script>模型ad.js:
const mongoose = require('mongoose')
const schema = new mongoose.Schema({
name: { type: String },
// 主要内容以数组格式存储，每条数据包括广告图片和广告链接
items: [{
image: { type: String },
url: { type: String }
}]
})
module.exports = mongoose.model('Ads', schema)测试接口均没问题。
2.添加广告元素（多组数据的上传）
（1）在广告位名称下方创建添加技能模块：
<el-form-item label="添加广告">
<el-button type="text" size="small" @click="model.items.push({})">
<i class="el-icon-plus"></i> 添加广告
</el-button>
<!-- 使用flex布局（栅格系统24列布局） -->
<el-row type="flex" style="flex-wrap: wrap">
<!-- 由于要添加数据到数组，所以使用循环来建立多组数据，index为唯一的索引值 -->
<el-col :md="12" v-for="(item, index) in model.items" :key="index">
<el-form-item label="广告链接">
<el-input v-model="item.url"></el-input>
</el-form-item>
<!-- 图片功能与技能模块创建过程相同 -->
<el-form-item label="广告图">
<el-upload
class="avatar-uploader"
:action="$http.defaults.baseURL + '/upload'"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="item.image" :src="item.image" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form-item>（2）修改js的data和methods：
data:
把items内容数组放在model中，避免页面找不到items
data(){
return {
model: {
items: [],
},
}
},methods:
a.进入修改广告位时的页面刷新函数，避免修改广告位内容时查询到的数据将items覆盖
async fetch(){
const res = await this.$http.get('rest/ads/' + this.id)
// 为避免直接给model赋值时覆盖model中的item字段，所以换一种赋值方式
// this.model = res.data
this.model = Object.assign({}, this.model, res.data)
}b.添加图片时添加图片后的函数，理论上是将回调的图片url赋值到model的items中。但是我们数据中的items为数组格式，找不到该放在数组中的哪个字段中，所以我们不使用下面的handleAvatarSuccess函数。
// 图片上传成功之后
handleAvatarSuccess(res) {
// 新建字段赋值到model.items
this.$set(this.model.items, 'image', res.url)
},（3）修改图片上传html
将函数改为参数的回调，直接将接收到图片url赋值到当前循环数组item的image中，最后一并保存到model.items。
此时，测试，添加四个广告：
没问题。
输入内容测试model：
没问题。
3.删除单条广告
每一个广告位对应web端一个位置上的广告，选定位置后就不再进行修改。所以广告位中的广告数量如果不能修改，后期是非常麻烦的。
点击删除广告按钮后立即删除，需要“是否要删除*”提醒的话大家自行创建函数。
4.完善上传接口
保存一下，看下哪里卡住，就修改哪里的接口。
呀，没问题。
由于1.我们使用了CRUD接口，几乎不需要做改动就可以完成增删改查。而2.图片的上传又是独立接口，不与整体数据进行影响，只回调图片接口链接。所以在我们保存model到数据库时，就是单纯地将model数据保存，只要模型Ad.js的字段、类型和数组层级定义正确即可。
