如何强制 HTML 输入文件选择器在 Ionic(Android) 中给出原始文件名? [英] How to force HTML input file chooser to give the original file name in Ionic(Android)?

问题描述

我使用 HTML input 在我的 Ionic3/Angular 应用程序中选择文件.我正在使用以下代码:

I am using HTML input for choosing file in my Ionic3/Angular application. I am using below code:

//在 .html 文件中

<input #fileUpload type="file" name="myfile"(change)="onFileChoose($event)"/>

//在 .ts 文件中

onFileChoose($event): void {
    this.fileChooser.getFileInfo($event).then((result) => {
      this.fileName = result.fileName;
      this.fileData = this.sanitizeFileData(result.fileData);
      this.fileSize = result.fileSize;
      this.fileType = result.fileType;
    }, (error) => {
      this.helperProvider.createAlert('Alert', 'File is corrupted.');
    });
  }

 getFileInfo(event: Event): Promise<any> {

    let target = event && event.target;
    let files: Array<File> = target && target['files'];

    console.log(files[0].type);
    console.log(files[0].name);

    return new Promise((resolve, reject) => {
      if (files && files.length) {
        files = Array.from(files);
        let fileName = files[0].name;
        let fileSize = files[0].size;
        let fileType = files[0].type;
        let fileReader = new FileReader();

        fileReader.onload = () => resolve({
          fileData: fileReader.result,
          fileName: fileName,
          fileSize: fileSize,
          fileType: fileType
        });

        fileReader.onerror = error => reject(error);

        fileReader.onabort = error => reject(error);

        fileReader.readAsDataURL(files[0])
      }
    });
  }

这在 iOS 和 Browser 中运行良好.在 android 和浏览器中，我都可以获得文件的原始名称、大小和类型.但问题出现在 Android.

This is working fine in iOS and Browser. Both, in android and browser, i could get the original name, size and type of the file. But the problem occurs in Android.

Scenario-1(Android):当我使用文件选择器选择图像文件时，我可以获得文件的原始文件名、大小和类型.

Scenario-1(Android): When i choose an image file using the file chooser, i could get the original file name, size and type of the file.

Scenario-2(Android):当我选择图像文件以外的文件(如 .pdf、.doc 等)时，我可以没有得到原始文件名和文件类型.假设，我选择了一个文件名sample.pdf"，但在我选择文件后，我得到的文件名是一个随机数，如 45675 和 最重要的是文件类型，我得到的是空的.

Scenario-2(Android): When i choose a file other than image file like .pdf,.doc etc, i could not get the original file name and the type of the file. Suppose, i have choosen a file name "sample.pdf", but after i chose the file, i get the file name as a random number like 45675 and most importantly the file type, i got is empty.

然后，我研究了 stackoverflow 并看到了这些链接(link1 和 link2).可能是安卓的安全问题.

Then, i researched in stackoverflow and saw these links (link1 and link2). It may be a security issue for android.

有一个 ionic-native/file-chooser 库，但它是仅适用于 android 平台.

There is an ionic-native/file-chooser library but it is only for android platform.

有没有办法强制android给出原始文件名?

Is there any way to force android to give the original file name?

推荐答案

Android 使用我的上述方法没有给出原始文件名和文件类型，这是来自 android 的安全问题.因此，我必须制定以下解决方案，以在 base64 中检索正确的文件名、文件类型、文件大小和文件数据.

Android does not give the original file name and file type using the above approach of mine and it is a security issue from android. So, i had to make below solution for retrieving the correct file name, file type, file size and the file data in base64.

您将需要以下四个插件:

You will need below four plugins:

1. 文件选择器
2. 文件
3. 文件路径
4. Base64

FileChooserAndroidProvider:

import {Injectable} from '@angular/core';
import {File, FileEntry, IFile} from "@ionic-native/file";
import {Base64} from "@ionic-native/base64";
import {FilePath} from "@ionic-native/file-path";
import {FileChooser} from "@ionic-native/file-chooser";


@Injectable()
export class FileChooserAndroidProvider {

  constructor(private base64: Base64, private filePath: FilePath, private file: File, private fileChooser: FileChooser) {
  }

  getFileInfo(): Promise<any> {
    return this.fileChooser.open().then((fileURI) => {
      return this.filePath.resolveNativePath(fileURI).then((filePath) => {
        return this.file.resolveLocalFilesystemUrl(filePath).then((fileEntry: FileEntry) => {
          return new Promise((resolve, reject) => {
            fileEntry.file(meta => resolve(meta), error => reject(error));
          });
        }).then((fileMeta: IFile) => {
          return new Promise((resolve, reject) => {
            return this.base64.encodeFile(filePath).then((base64Data) => {
              resolve({
                fileData: base64Data,
                fileName: fileMeta.name,
                fileSize: fileMeta.size,
                fileType: fileMeta.type
              })
            }).catch((error) => {
              reject(error);
            })
          })
        });
      });
    });
  }
}

FileChooserAndroidProviderModule:

import {NgModule} from '@angular/core';
import {Base64} from "@ionic-native/base64";
import {FileChooser} from "@ionic-native/file-chooser";
import {FilePath} from "@ionic-native/file-path";
import {File} from "@ionic-native/file";

@NgModule({
  declarations: [],
  exports: [],
  providers: [
    FileChooser,
    File,
    FilePath,
    Base64
  ]
})
export class FileChooserAndroidProviderModule {
}

示例页面:

constructor(private fileChooserAndroid: FileChooserAndroidProvider){}

  uploadFileForAndroid(): void {
    this.fileChooserAndroid.getFileInfo().then((result) => {
      this.fileName = result.fileName;
      this.fileData = this.sanitizeFileData(result.fileData);
      this.fileSize = result.fileSize;
      this.fileType = result.fileType;
    }).catch((error) => {
      this.helperProvider.createAlert('Alert', 'File can not be uploaded.');
    });
  }

SamplePageModule:

@NgModule({
  declarations: [
    SamplePage
  ],
  imports: [
    FileChooserAndroidProviderModule
  ],
  providers: [
    FileChooserAndroidProvider
  ]
})
export class SamplePageModule {
}

这篇关于如何强制 HTML 输入文件选择器在 Ionic(Android) 中给出原始文件名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！