Question

Helo 开发人员，我正在做这个 IONIC 应用程序，现在我正在尝试自定义我的 Slect 文件输入按钮，以使其更加用户友好。为了做到这一点，我将该输入绑定到一个图像，该图像可能具有该输入文件通过本地引用继承的按钮功能。因此可以说这是我的模板：

   <form [formGroup]="editImageForm" (ngSubmit)="editImage()" #form="ngForm" *ngIf="imageSelected">

      <ion-item color="lightapppersonalized ">
        <ion-chip color="primary" mode="ios" outline="true">
          <ion-avatar>
            <img [src]="img|pipeImagen|async" />
          </ion-avatar>
          <ion-label>{{imageSelected[0].url|pipeTitleFormat}}</ion-label>
          <ion-input style="display:none"  type="file" 
          placeholder="Awesome Input" (change)="selectImg($event)"
            formControlName="url" #imageUpload>
          </ion-input>
        </ion-chip>

        <ion-icon mode="ios" (click)='imageUpload.click()' src="./assets/edit.svg"></ion-icon>
    
      </ion-item>
      
      .....
   </form>

从字面上看，输入文件设置为不可见，同时在其中设置本地引用（#imageUpload）

然后在正下方和图标（我也尝试设置图像或按钮）使用引用该本地引用（#imageUpload）的点击事件初始化，然后是点击方法。但由于某种原因，点击本地参考并不受欢迎
一旦我在应用程序中触发操作，就会出现错误：

ERROR TypeError: _r2.click is not a function
    at EditImageSelectedComponent_form_8_Template_ion_icon_click_13_listener (template.html:29)
    at executeListenerWithErrorHandling (core.js:14316)
    at wrapListenerIn_markDirtyAndPreventDefault (core.js:14351)
    at HTMLElement.<anonymous> (platform-browser.js:582)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:27425)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
    at invokeTask (zone-evergreen.js:1621)

作为对点击事件在我的 html 标签中解决的图标的明确引用。

任何帮助都会很棒

Answer 1

我不知道为什么 imageUpload.click() 不起作用，但这是我在我的 ionic 应用程序中自定义文件输入的方法。

<div class="input-container">
    <div class="button-wrap">
        <label for="image-input" [className]="buttonClass">
            <ion-icon slot="start" name="Image" style="font-size: xx-large; vertical-align: middle"></ion-icon>
            {{STRINGS.open_gallery}} {{images64.length}}/{{maxImages}}
        </label>
        <input type="file" accept="image/png, image/jpeg" (change)="receivePhoto()"
               id="image-input" multiple>
    </div>
</div>

和CSS

.input-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

input[type="file"] {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 8px;
  font-size: 17px;
  color: #b8b8b8;
  display: none;
}

.button-wrap {
  position: relative;
  margin: auto;
  padding-top: 4px;
}

.select-image-button {
  display: inline-block;
  padding: 2px 18px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

尝试自定义输入文件时出现 IONIC 错误

1 个答案: