如何将 div 作为输入

Question

在我的 Angular 应用程序中，我有一个自定义图像网格，当在最后一张图像之后，我自定义了带有一些 fa-icon 和文本的 div，当用户单击它想要在 pc 中显示图像选择窗口时

我尝试将 <input #imgeSelecter type="file" accept=".png, .jpg, .jpeg" (change)="openImageSelector(imgeSelecter)"/> 放入我的自定义 div 并在 css 中将其作为 input{display:none} 提供，但没有任何反应。我将在这篇文章中附上图片

 <div class="upload-img-placeholder">
          <fa-icon class="textfeild-icon [icon]="['fas', 'upload']">
          </fa-icon>
            <input
              #imgeSelecter
              type="file"
              accept=".png, .jpg, .jpeg"
              (change)="openImageSelector(imgeSelecter)"
            />
            <span>
              Upload photos
            </span>

            <span class="upload-img-messege">
              You can upload # more photos
            </span>
 </div>


.upload-img-placeholder {
        input {
          //display: none;

        }
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: percentageCalculator(16);
        background-color: #e3e7eb;
        height: percentageCalculator(130);
        width: percentageCalculator(165);
        border-radius: percentageCalculator(6);
        margin-left: percentageCalculator(20);
        margin-top: percentageCalculator(27);
        color: $sub-title-dark-color;
        cursor: pointer;
        //opacity: 0.4;
        > .upload-img-messege {
          font-size: percentageCalculator(14);
          opacity: 0.7;
          margin-left: percentageCalculator(25);
          margin-right: percentageCalculator(20);
          cursor: pointer;
      }
   }

Answer 1

最简单的方法

component.html

  <input type="file" id="file" (change)="uploadFile($event.target.files[0])" accept="image/*">

  <div class="container" (click)="openFileUpload()">
    <p>Upload Photos <p>
  </div>

  <p>{{file?.name}} </p>

组件.css

#file{
  display: none;
}

.container{
  width: 150px;
  height: 150px;
  background-color: grey;
  text-align: center;
  cursor: poiner;
}

组件.ts

  openFileUpload() {
    document.getElementById('file').click();
  }

  uploadFile(file) {
   console.log(file);
  }

stackblitz 示例https://stackblitz.com/edit/angular-zdnjja?file=src%2Fapp%2Fapp.component.ts