el-upload上传右上角勾号去掉

要去掉el-upload上传组件右上角的勾号，可以通过设置el-upload组件的show-upload-list属性为false来实现。

例如：

<el-upload
  class="upload-demo"
  action="/upload"
  :show-upload-list="false">
  <el-button slot="trigger" type="primary">选取文件</el-button>
  <el-button type="success">上传到服务器</el-button>
</el-upload>

这样设置后，上传成功后就不会显示右上角的勾号了。

相关问题

<el-upload v-if="userType!=='stu'" accept=".png,.jpeg,.jpg" action :http-request="uploadPhoto" :file-list="fileImgList" :show-upload-list="false" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload>去除右上角的勾号

你可以在el-upload组件中添加一个slot属性为`file`，然后在这个slot中自定义上传文件列表项的显示。这样就可以去掉右上角的勾号了。

例如：

<el-upload v-if="userType!=='stu'"
  accept=".png,.jpeg,.jpg"
  action
  :http-request="uploadPhoto"
  :file-list="fileImgList"
  :show-upload-list="false"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
>
  <i class="el-icon-plus"></i>
  <template slot="file" slot-scope="{ file }">
    <div class="el-upload-list__item-thumbnail">
      <img :src="file.url" alt="" />
    </div>
    <span class="el-upload-list__item-actions">
      <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
        <i class="el-icon-zoom-in"></i>
      </span>
      <span class="el-upload-list__item-delete" @click="handleRemove(file)">
        <i class="el-icon-delete"></i>
      </span>
    </span>
  </template>
</el-upload>

在这里，我们通过添加一个`file` slot来自定义上传文件列表项的显示，其中包括一个放置图片缩略图的div和两个操作按钮：预览和删除。这样就可以去掉右上角的勾号了。

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;
},