表单元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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> |
图片上传验证,上传图片处理,删除图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | // 动态图片验证 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); }); }, |