离子同时上传多个关键图像

时间:2019-04-02 11:28:45

标签: ionic-framework ionic3 angular5

我正在使用Ionic 3,并且已根据Devdactic的this教程实现了图片上传。

当上传单个图像时,它可以完美工作。我的问题是我想用多个键上传多个图像。

这是我的代码:

upload.ts

用于读取捕获的文件的功能:

  readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], {
        type: file.type
      });
      formData.append('ktp', this.dataReg.ktp);
      formData.append('nama', this.dataReg.nama);
      formData.append('namaPerusahaan', this.dataReg.namaPerusahaan);
      formData.append('alamat', this.dataReg.alamat);
      formData.append('file1', imgBlob, this.images[0].name);
      formData.append('file2', imgBlob, this.images[1].name);
      formData.append('file3', imgBlob, this.images[2].name);
      formData.append('file4', imgBlob, this.images[3].name);
      formData.append('file5', imgBlob, this.images[4].name);
      formData.append('file6', imgBlob, this.images[5].name);
      this.uploadImageData(formData);
    };
    reader.readAsArrayBuffer(file);
  }

用于加载存储的图像的功能:

  loadStoredImage() {
    this.storage.get(STORAGE_KEY).then(image => {
      if (image) {
        let arr = JSON.parse(image);
        this.images = [];
        for (let img of arr) {
          let filePath = this.file.dataDirectory + img;
          let resPath = this.pathForImage(filePath);
          this.images.push({ name: img, path: resPath, filePath: filePath });
        }
        console.log(this.images);
      }
    });
  }

上传功能:

  startUpload(imgEntry) {
    this.file.resolveLocalFilesystemUrl(imgEntry.filePath)
      .then(entry => {
        alert(JSON.stringify(entry));
        (<FileEntry>entry).file(file => this.readFile(file));
      })
      .catch(_err => {
        this.serverProvider.presentError('Kesalahan membaca file.');
      });
  }

如果有人知道如何欺骗多张图片上传,请帮助我。任何建议表示赞赏。谢谢。

0 个答案:

没有答案