Question

我正在寻找Ionic的图像选择器插件的替代品，或者使用它来将文件附加到表单以进行上传的一些指导。我正在使用的api要求通过表单上传文件。非常感谢您的想法或建议。多文件选择的功能是其中最重要的部分。

Answer 1

我面临着同样的问题

使用此代码选择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/

Answer 2

您可以使用标准的Web 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);
            };
        })
      };

选择不带Image-Picker插件离子的多个图像

2 个答案: