vue element-ui v-for循环el-upload上传图片 动态添加、删除

表单元素

<el-row v-for="(v,i) in RecordOperation.imgList" :key="i">
                <el-col :span='11'>
                    <el-form-item label="图片">
                        <el-upload
                                accept="image/jpeg,image/png"
                                class="avatar-uploader"
                                :action="uploadUrl()"
                                :show-file-list="false"
                                :on-success="dynamicPicSuccess.bind(null, {'index':i,'data':v})"
                                :before-upload="beforeUploadImageDynamicPic">
                            <img v-if="v.picUrl" :src="v.picUrl" class="avatar dynamic">
                            <i v-else class="el-icon-plus avatar-uploader-icon dynamic"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="图片介绍">
                        <el-input minlength="4" maxlength="20" v-model.trim="v.content"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2" align="right" v-show="RecordOperation.imgList.length<=2?false:true">
                    <el-button type="text" style="color:red;line-height:32px;" @click="delDynamicPic(i,RecordOperation.imgList)">删除</el-button>
                </el-col>
            </el-row>

图片上传验证，上传图片处理，删除图片

// 动态图片验证
            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.filePath;
                // 少于5张图时，自动添加一行
                if(imgList.length<5)
                imgList.push({content: '', picUrl: ""});
            },

            // 移除动态建设图片
            delDynamicPic(i,list) {
                this.$confirm('确认删除该条记录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    list.splice(i, 1);
                });
            },