手动点击上传，只能传一张，图片可预览

上代码：
html

上传：
<el-form-item label="图片" prop="HFname">
              <el-upload
                class="upload-demo"
                :action="' '"//手动上传 置空
                accept=".png"// 限制上传图片类型
                :auto-upload="false"//是否自动上传，false不自动
                :file-list="HFfileList"//上传展示list
                :on-remove="HFhandleRemove"
                :on-change="HFhandleChangeImg"// 重点在这里
              >
               <el-button size="small" type="primary" class="ml10">点击上传</el-button>
              </el-upload>
</el-form-item>
预览：
 <div >
      <img :src="hfpng" alt v-if="hfpng || dredgeServe.HFname" />
      <img v-else src="默认图片" alt />
 </div>

js

HFhandleChangeImg(file, fileList) {
      const isPNG = file.raw.type === "image/png";
      const isLt2M = file.raw.size / 1024 / 1024 < 0.5;
      if (fileList.length > 0) {
      //单个覆盖上传
        this.HFfileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择的csv文件
        if (!isPNG) {
          this.$message.error("上传图片只能是 PNG 格式!");
          return false;
        } else if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 200kb!");
          this.HFfileList = []
          return false;
        } else if (isLt2M && isPNG) {
          this.HFformData.file = file.raw;//待上传图片的url
          this.dredgeServe.HFname = file.name;
        }
      }
      //预览
      var file = file.raw;
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        that.hfpng = this.result;//上传前可预览图片路径
      };
    },

css:
改为单个覆盖上传，样式还是之前动态切换的，单个上传不需要切换样式，可做更改

<style lang="scss" scoped>
    .upload-demo {
      display: flex;
    }
    /deep/ .el-list-enter-active,
    /deep/ .el-list-leave-active {
      transition: none;
    }
 
    /deep/ .el-list-enter,
    /deep/ .el-list-leave-active {
      opacity: 0;
    }
    /deep/ .el-upload-list {
      height: 40px;
    }
</style>

/deep/ 是修改elementui等第三方组件内部样式，做的渗透。如果不用scss， 可以使用 >>> 符号来修改第三方组件内部样式