요소 ui는 수동으로 그림을 업로드할 수 있으며 단일 그림만 업로드할 수 있으며 업로드를 덮어쓸 수 있습니다

수동으로 클릭하여 업로드, 한 장만 업로드, 이미지 미리보기 가능

위 코드: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/는 요소ui 등 제3자 구성 요소의 내부 양식을 수정하여 침투시킨다.scss를 사용하지 않으면 >>> 기호를 사용하여 제3자 구성 요소 내부 스타일을 수정할 수 있습니다