使用el-upload时的一些坑点

使用背景:笔者目前在迁移一个项目，将一个使用react技术栈的一项迁移到一个使用vue的项目中，在实现过程中，由于不熟悉以及个人能力所限，遇到了很多问题，记录一下。

1.关于el-upload上传成功后仍然显示校验规则的问题

解决方案:出现这种问题的原因其实是因为我们群LOGO对应的数据，在上传成功后没有赋值，也就是提交表单时部分数据为空，那自然不可能验证通过。不过一开始并没有想到这个问题，在网上搜索时走了很多弯路，比如下面几篇文章，其实有些繁琐。比如用element的钩子函数http-request覆盖action，但是由于后台的图片必须是分块上传，所以只能放弃这种做法。网上搜索到的解决方案，其实我们只要添加一个上传成功后的回调就可以。

 <el-form-item label="群Logo：" prop="groupLogo">
          <el-upload
            class="avatar-uploader"
            action="/api/v1/upload/uploadImage"
            :show-file-list="false"
            :multiple="false"
            :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>
        </el-form-item>

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

2.使用el-upload上传图片成功后无法替换。
原项目中点击上传后的图片仍然可以上传替换，类似于这种效果。


解决方案：一开始以为element不支持这种方式，也尝试了很多，最后发现其实是因为设置了一个属性，去掉就可以。

          <el-upload
            class="avatar-uploader"
            action="/api/v1/upload/uploadImage"
            :show-file-list="false"
            :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>