例如有些时候需要上传多张图片，但是并不确定留下几个图片位，这是我们就想手动添加图片位，从而实现自定义数量图片的上传。我们以广告上传为例，上传多个广告。 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的字段、类型和数组层级定义正确即可。