Как получить свойства файла и загрузить файл из ionic 4?

Question

Я пытаюсь загрузить файл с мобильного телефона в корзину Google, используя ionic 4. Хотя файл может быть загружен в файл. Я изо всех сил пытаюсь получить свойства файла из объекта файла.

Вот мой метод,

async selectAFile() {

    const uploadFileDetails = {
      name: '',
      contentLength: '',
      size: '',
      type: '',
      path: '',
    };

    this.fileChooser.open().then(uri => {

      this.file.resolveLocalFilesystemUrl(uri).then(newUrl => {
        let dirPath = newUrl.nativeURL;

        const dirPathSegments = dirPath.split('/');
        dirPathSegments.pop();
        dirPath = dirPathSegments.join('/');

        (<any>window).resolveLocalFileSystemURL(
          newUrl.nativeURL,
          function(fileEntry) {
            uploadFileDetails.path = newUrl.nativeURL;

            const file: any = getFileFromFileEntry(fileEntry);

            //log 01 
            console.log({ file });

            uploadFileDetails.size = file.size;
            uploadFileDetails.name = `${newUrl.name
              .split(':')
              .pop()}.${file.type.split('/').pop()}`;
            uploadFileDetails.type = file.type;

            async function getFileFromFileEntry(fileEntry) {

              try {
                return await new Promise((resolve, reject) =>
                  fileEntry.file(resolve, reject)
                );
              } catch (err) {
                console.log(err);
              }
            }

          },
          function(e) {
            console.error(e);
          }
        );
      });
    });

    // here uploadFileDetails is simller to what I declared at the top ;)
    // I wan't this to be populated with file properties
    // console.log(uploadFileDetails.name) --> //''

    const uploadUrl = await this.getUploadUrl(uploadFileDetails);

    const response: any = this.uploadFile(
      uploadFileDetails,
      uploadUrl
    );

    response
      .then(function(success) {
        console.log({ success });
        this.presentToast('File uploaded successfully.');
        this.loadFiles();
      })
      .catch(function(error) {
        console.log({ error });
      });
  }

, хотя я могу console.log файл в журнале 01. Я не могу получить свойства файла, такие как size, name, type из функции resolveLocalFileSystemURL. в основном я не могу заполнить uploadFileDetails объект. Что я делаю неправильно? Заранее спасибо.

Answer 1

вам на самом деле нужны 4 Ionic Cordova плагины для загрузки файла после получения всех метаданных файла.

1. FileChooser

   Открывает средство выбора файлов на Android для пользователя, чтобы выбрать файл, возвращает URI файла.

2. FilePath

   Этот плагин позволяет разрешать собственный путь к файловой системе для URI контента Android и основан на коде из библиотеки aFileChooser.

3. Файл

   Этот плагин реализует File API, позволяющий доступ на чтение / запись к файлам, находящимся на устройстве.

4. Файл Трнафер

   Этот плагин позволяет загружать и скачивать файлы.

получение метаданных файла.

• file.resolveLocalFilesystemUrl с fileEntry.file предоставит вам все необходимые метаданные, кроме имени файла . В метаданных есть свойство, которое называется name, но оно всегда содержит значение content .
• Чтобы получить понятное для человека имя файла, вам нужно filePath. Но помните, что вы не можете использовать возвращаемый путь к файлу для получения метаданных. Для этого вам понадобится исходный URL от fileChooser.
• filePathUrl.substring(filePathUrl.lastIndexOf('/') + 1) используется для получения только имени файла из filePath.
• Вам нужно nativeURL файла, чтобы загрузить его. Использование пути к файлу, возвращающегося из filePath, не будет работать.

    getFileInfo(): Promise<any> {
            return this.fileChooser.open().then(fileURI => {
                return this.filePath.resolveNativePath(fileURI).then(filePathUrl => {
                    return this.file
                        .resolveLocalFilesystemUrl(fileURI)
                        .then((fileEntry: any) => {
                            return new Promise((resolve, reject) => {
                                fileEntry.file(
                                    meta =>
                                        resolve({
                                            nativeURL: fileEntry.nativeURL,
                                            fileNameFromPath: filePathUrl.substring(filePathUrl.lastIndexOf('/') + 1),
                                            ...meta,
                                        }),
                                    error => reject(error)
                                );
                            });
                        });
                });
            });
        }

выберите файл в файловой системе мобильного телефона.

async selectAFile() {

    this.getFileInfo()
        .then(async fileMeta => {

            //get the upload 
            const uploadUrl = await this.getUploadUrl(fileMeta);

            const response: Promise < any > = this.uploadFile(
                fileMeta,
                uploadUrl
            );

            response
                .then(function(success) {
                    //upload success message                       
                })
                .catch(function(error) {
                    //upload error message
                });
        })
        .catch(error => {
            //something wrong with getting file infomation
        });
}

загрузка выбранного файла.

Это зависит от вашей серверной реализации. Это как использовать File Transfer для загрузки файла.

uploadFile(fileMeta, uploadUrl) {

    const options: FileUploadOptions = {
      fileKey: 'file',
      fileName: fileMeta.fileNameFromPath,
      headers: {
        'Content-Length': fileMeta.size,
        'Content-Type': fileMeta.type,
      },
      httpMethod: 'PUT',
      mimeType: fileMeta.type,
    };

    const fileTransfer: FileTransferObject = this.transfer.create();
    return fileTransfer.upload(file.path, uploadUrl, options);
  }

надеюсь, это поможет. :)