使用el-upload添加除预览+删除之外的功能图标按钮

**需求**使用el-upload添加除预览删除之外的添加索引设置小图标按钮实现效果如图分别为未添加图片、添加图片、添加图片为设置限制数量5时添加按钮隐藏结构代码如下el-form-item label图片propgasProductFileRelationVOListel-upload v-model:file-listformMethod.fileListaction#accept.png,.jpg,.jpeglist-typepicture-card:limit5:auto-uploadfalse:on-changeformMethod.fileChange:on-exceedformMethod.handleExceed:classformMethod.fileList.length 5? appl_upload applet_upload: appl_uploadel-iconPlus//el-icon!--自定义文件列表的展示--template #file{ file }divimgclassel-upload-list__item-thumbnail:srcfile.urlalt/spanclassel-upload-list__item-actionsspanclassel-upload-list__item-previewclickdialogObj.openDialog(file)el-iconzoom-in//el-icon/spanspanclassel-upload-list__item-deleteclickformMethod.handleRemove(file)el-iconDelete//el-icon/span/spanspanclassindex_setspan v-iffile.indexPicimg src/assets/images/indexSet.pngalt/索引/spanspan v-elseclickformMethod.setIndex(file)设为索引/span/span/div/templatetemplate #tipdiv stylecolor: #da2d2av-ifformMethod.fileList.length ! 5文件大小不能超过10M/div/template/el-upload/el-form-item//图片放大预览弹框el-dialog title图片v-modeldialogObj.dialogImagVisibleappend-to-bodyimg stylewidth: 100%:srcdialogObj.dialogImageUrlalt//el-dialog2、js相关代码// 表单用到的方法letformMethodreactive({loading:false,// 图片fileList:[],fileChange:(file,fileList){if(![image/jpeg,image/jpg,image/png].includes(file.raw.type)){ElMessage.error(图片格式有误);if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}return;}if(file.size/1024/102410){ElMessage.error(图片大小不能超过10MB请重新上传);if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}return;}// 上传接口constfdnewFormData();fd.append(file,file.raw);uploadFile(fd).then((res){// 调用后台给的上传图片接口if(res.code200){letindexPic0;if(formMethod.fileList.length1){indexPic1;}formMethod.fileList.push({fileId:res.data.id,id:res.data.id,url:res.data.visitUrl,name:res.data.originalName,filePath:res.data.filePath,visitUrl:res.data.visitUrl,indexPic:indexPic,});if(formMethod.fileList.length!0){formMethod.fileList.forEach((item,index){if(item.statusready){formMethod.fileList.splice(index,1);}});}ElMessage.success(上传成功);}else{formShop.gasProductFileRelationVOList[];formMethod.fileList[];}});},//将图片设为索引setIndex:(file){formMethod.fileList.forEach((item){item.indexPic0;});file.indexPic1;},handleRemove:(file){letindexformMethod.fileList.indexOf(file);if(index!-1){formMethod.fileList.splice(index,1);}},handleExceed:(fileList){constfilefileList[0];file.uidgenFileId();},// 获取图片getPic:(){formShop.gasProductFileRelationVOList[];if(formMethod.fileList.length!0){formMethod.fileList.forEach((item){formShop.gasProductFileRelationVOList.push({id:item.id,fileId:item.fileId,indexPic:item.indexPic,});});}},// 表单提交方法submit:(operType){formMethod.getPic();form.value.validate((valid){if(valid){//表单提交接口}});},});// 图片放大letdialogObjreactive({dialogImagVisible:false,dialogImageUrl:,openDialog:(file){dialogObj.dialogImageUrlfile.url;dialogObj.dialogImagVisibletrue;}});