Блог

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

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

 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 объект. Что я делаю не так? Заранее благодарю вас.

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

1. FileChooser
   

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

2. Путь к файлу

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

3. Файл

   Этот плагин реализует файловый 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
        });
}
  

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

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

 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);
  }
  

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