选择多个没有图像选择器插件ionic的图像

Question

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

Answer 1

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

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/