el-upload上传的坑

el-upload上传的坑主要包括两个方面：替换图片和校验规则显示。

1. 替换图片：原项目中点击上传后的图片仍然可以上传替换，类似于这种效果。解决方案是去掉属性":show-file-list="false""，这样上传成功后就可以替换图片了。

2. 校验规则显示：上传成功后仍然显示校验规则的问题。解决方案是在上传成功后的回调函数中，将上传成功后的图片数据赋值给对应的字段，例如"handleGroupLogoSuccess"函数中，将上传成功的图片路径赋值给"sportsGroupForm.groupLogo"字段。

以下是修改后的代码示例：

<el-upload class="avatar-uploader" action="/api/v1/upload/uploadImage" :multiple="false" :limit="1" :on-success="handleGroupLogoSuccess">
  <img v-if="sportsGroupForm.groupLogo" :src="sportsGroupForm.groupLogo" class="avatar" />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

handleGroupLogoSuccess(response, file, fileList) {
  const { data } = response;
  this.sportsGroupForm.groupLogo = data;
},