选择没有 Image-Picker 插件 ionic 的多个图像答案

【问题标题】：Select multiple images without Image-Picker plugin ionic选择没有 Image-Picker 插件 ionic 的多个图像
【发布时间】：2018-10-31 06:26:15
【问题描述】：

我正在寻找 Ionic 的图像选择器插件的替代品或一些关于使用它来将文件附加到表单以供上传的指南。我正在使用的 api 需要通过表单上传该文件。非常感谢您的想法或建议。多文件选择的特性是其中最重要的部分。

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

您可以使用标准的 web api（文件输入）来实现这一点，并使用“multiple”作为属性。

您的模板：

<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);
            };
        })
      };

【讨论】：

常见问题：Android 上不允许多选
您是否在最新的 Android 设备上也看到此问题？似乎 Android 支持多个，但非常参差不齐。
好吧，我有 8.1，而且无论我如何尝试，多项选择都无法使用 :( 但我在其他几个地方看到其他人也有同样的问题

【解决方案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/

【讨论】：