教你如何用最简单的方法实现el-upload组件的上传头像显示，删除头像（不绑定List不操作List）

  这个el-upload我是真的没有整明白，如果我想实现使用图一这样一个框，然后点击就可以上传头像并且触碰就可以像第二张图一样，然后点击删除图标再回到第一张图这样的一个需求，在elment的upload里面完全找不到怎么实现，要么就是上传完再给你放一个图一要么就是删除不行

  查阅了很多资料，确实解决了上传之后不再显示一个图一的方法，但是删除功能解决的还是太麻烦了，解决方案不但要绑定一个List，还要去管理你定义的这个List，直接给大家放我的解决方案吧

（这个动图咋这么快啊......）

1.组件方面

  使用的是这个，主要是因为这个class="upload_demo"和list-type="picture-card"，代码有很多重复没有必要看的地方，可以直接后面总结的关键点

  显示图片就按照这个组件说明就可以显示

<!-- 上传头像 -->
        <el-upload
          action="#"
          ref="upload_attach"
          class="upload_demo"
          :class="{ 'none-up': uploadDisabled }"
          list-type="picture-card"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :http-request="uploadFile"
        >
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="$refs.upload_attach.handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
        <!-- 头像放大展示 -->
        <el-dialog v-model="imgDialog">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>

2.基础部分

//el-upload的关键属性
ref="upload_attach"
:class="{ 'none-up': uploadDisabled }"
:on-remove="handleRemove"

//上传用户头像涉及的变量
let fileList = reactive([]); //文件列表
let uploadDisabled = ref(false); //如果多于一个就不显示控件

  这些是必要的

  虽然我定义了一个fileList，但是可以看到我根本没有绑定，所以这个List就是一个判断用的，不需要自己维护，可以继续看后面

3.实现上传后不再出现一个新的上传框

// 上传头像
const uploadFile = async (item) => {
  //上传头像的处理，上传图片list里面东西就+1，大于等于1就开启判断css
  fileList.push({ item });
  uploadDisabled.value = fileList.length >= 1 ? true : false;
};

//样式
.none-up :deep(.el-upload--picture-card) {
  display: none;
}

  到这里就可以实现通过样式控制不出现新的上传框

4.实现删除功能

  这个真的挺离谱的，用这个感觉就是要去分析源码，但是！

//首先这里的事件要像我这样绑定到el-upload的handleRemove，照抄即可
//记得给父组件加一个ref="upload_attach"，注意基础部分
<span
   class="el-upload-list__item-delete"
   @click="$refs.upload_attach.handleRemove(file)"
  >
  <el-icon><Delete /></el-icon>
</span>

//关键点！！！
//删除图片
const handleRemove = () => {
  //清空list
  fileList = [];
  //让原本的样式生效！
  uploadDisabled.value = false;
};

  这里详细讲一下，虽然只有三行关键代码，甚至也可以不让fileList置空，置空...感觉干净点吧

  点击删除之后调用了父组件的删除，让上传了图片的框消失，正常的话组件直接就没了，但是通过让原本隐藏的样式生效就又实现了再多一个框。

  可以不让fileList置空是因为，每次上传图片就会走上面第三步的函数，然后每次走判断，fileList长度每次上传都会+1，所以这个List一直都是大于1，建议亲自尝试加深理解

  这样就使用这么一行代码解决了删除！