Выберите несколько изображений без использования плагина Image-Picker

Question

Я ищу альтернативу плагину Ionic для выбора изображений или руководство по его использованию для прикрепления файла к форме для загрузки.API, который я использую, требует, чтобы файл загружался через форму.Мысли или предложения очень ценятся.Особенностью этой функции является возможность выбора нескольких файлов.

Answer 1

Вы можете использовать стандартный веб-API (для ввода файла), чтобы достичь этого, и использовать «несколько» в качестве атрибута.

Ваш шаблон:

<button ion-button>
     <ion-icon name="image"></ion-icon>
     <input multiple type="file” (change)="loadImageFromDevice($event)" accept="image/png, image/jpeg">
</button>

Ваш ts:

    myImages: Array<string>;

    ...

    loadImageFromDevice(event) {
        const files = event.target.files;
        const blobReader = new FileReader();
        files.forEach(file => {
            blobReader.readAsArrayBuffer(file);
            blobReader.onload = () => {
                let blob: Blob = new Blob([new Uint8Array((blobReader.result as ArrayBuffer))]);
                let blobURL: string = URL.createObjectURL(blob);
                this.myImages.push(blobURL);
            };
            blobReader.onerror = (error) => {
                console.log(error);
            };
        })
      };

Answer 2

Я столкнулся с той же проблемой

используйте этот код для выбора файла в Ionic HTML

---

  <ion-input type="file" (change)="changeListener($event)"></ion-input>

---

Ts файл

---

changeListener(event) {
var reader = new FileReader();
reader.readAsDataURL(event.target.files[0]);
reader.onload = (_event) => {
  this.imgURL = reader.result;
  //base64 image
  console.log("Image File =>", this.imgURL);
}

}

---

Затем создайте массив файловых контроллеров и нажмите одну кнопку, чтобы увеличить его, затем вы можете создать несколько файловых элементов управления для обработки и загрузки на сервер.

проверьте это для справки http://masteringionic.com/blog/2018-02-06-dynamically-add-and-remove-form-input-fields-with-ionic/