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

**需求：**使用el-upload添加除预览+删除之外的添加索引设置小图标按钮
实现效果如图：分别为未添加图片、添加图片、添加图片为设置限制数量5时添加按钮隐藏

结构代码如下：

<el-form-item label="图片："prop="gasProductFileRelationVOList"><el-upload v-model:file-list="formMethod.fileList"action="#"accept=".png,.jpg,.jpeg"list-type="picture-card":limit="5":auto-upload="false":on-change="formMethod.fileChange":on-exceed="formMethod.handleExceed":class="formMethod.fileList.length == 5? 'appl_upload applet_upload': 'appl_upload'"><el-icon><Plus/></el-icon><!--自定义文件列表的展示--><template #file="{ file }"><div><imgclass="el-upload-list__item-thumbnail":src="file.url"alt=""/><spanclass="el-upload-list__item-actions"><spanclass="el-upload-list__item-preview"@click="dialogObj.openDialog(file)"><el-icon><zoom-in/></el-icon></span><spanclass="el-upload-list__item-delete"@click="formMethod.handleRemove(file)"><el-icon><Delete/></el-icon></span></span><spanclass="index_set"><span v-if="file.indexPic"><img src="@/assets/images/indexSet.png"alt=""/>索引</span><span v-else@click="formMethod.setIndex(file)">设为索引</span></span></div></template><template #tip><div style="color: #da2d2a"v-if="formMethod.fileList.length !== 5">文件大小不能超过10M</div></template></el-upload></el-form-item>//图片放大预览弹框<el-dialog title="图片"v-model="dialogObj.dialogImagVisible"append-to-body><img style="width: 100%":src="dialogObj.dialogImageUrl"alt=""/></el-dialog>

2、js相关代码

// 表单用到的方法letformMethod=reactive({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.status==="ready"){formMethod.fileList.splice(index,1);}});}return;}if(file.size/1024/1024>10){ElMessage.error("图片大小不能超过10MB，请重新上传！");if(formMethod.fileList.length!=0){formMethod.fileList.forEach((item,index)=>{if(item.status==="ready"){formMethod.fileList.splice(index,1);}});}return;}// 上传接口constfd=newFormData();fd.append("file",file.raw);uploadFile(fd).then((res)=>{// 调用后台给的上传图片接口if(res.code===200){letindexPic=0;if(formMethod.fileList.length===1){indexPic=1;}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.status==="ready"){formMethod.fileList.splice(index,1);}});}ElMessage.success("上传成功");}else{formShop.gasProductFileRelationVOList=[];formMethod.fileList=[];}});},//将图片设为索引setIndex:(file)=>{formMethod.fileList.forEach((item)=>{item.indexPic=0;});file.indexPic=1;},handleRemove:(file)=>{letindex=formMethod.fileList.indexOf(file);if(index!==-1){formMethod.fileList.splice(index,1);}},handleExceed:(fileList)=>{constfile=fileList[0];file.uid=genFileId();},// 获取图片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){//表单提交接口}});},});// 图片放大letdialogObj=reactive({dialogImagVisible:false,dialogImageUrl:"",openDialog:(file)=>{dialogObj.dialogImageUrl=file.url;dialogObj.dialogImagVisible=true;}});