时间戳

首页 > 解决方案 > 使用 Ionic 文件选择器上传 PDF 后文件数据为空，PDF 已损坏

angular - 使用 Ionic 文件选择器上传 PDF 后文件数据为空，PDF 已损坏

问题描述

我使用的插件Chooser来自@ionic-native/chooser/ngx：https ://ionicframework.com/docs/native/chooser 我的目标是从我手机上的下载中获取一个 PDF 文件，并将其发送到base64. 但我的服务器收到损坏的 PDF。

我这样使用它：

  openFiles() {
this.chooser
  .getFile('application/pdf')
  .then((file) => {
    console.log('L-119 --> File  : ' + JSON.stringify(file));}

但是当我在控制台中读取文件时，我得到了这个：

在此处输入图像描述

我的数据是空的！ 所以我对此无能为力，或者我错过了什么？

例如，对于一张照片，我正在使用相机插件，如下所示：

  this.camera.getPicture(options).then(
  (imageData) => {
    console.log('file ' + JSON.stringify(imageData));

我得到这个结果：

在此处输入图像描述

我的服务器得到一个正确的文件并且可以打开它。你知道我如何使用chooserIonic 插件中的这些信息来正确发送我的 PDF 吗？

我想用离子方式来做。

编辑 1：

使用 Ionic 的 Base64 插件

        const filePath = file.uri;
    this.base64.encodeFile(filePath).then(
      (base64File: string) => {
        console.log('my base 64 file is ' + base64File);
      },
      (err) => {
        console.log(err);
      }
    );

结果 ： 在此处输入图像描述

我的插件中的 base64 文件Base64仍然是空的。

编辑 2：

对于 Base64，我们需要给出文件的路径，而不是 URI。为了获得路径，我Ionic File Path这样使用：

      this.filePath
      .resolveNativePath(file.uri)
      .then((resultat) => console.log('file path ' + resultat))
      .catch((err) => console.log(err));

我收到这个：file:///storage/emulated/0/Download/dummy.pdf' 然后用@Najam Us Saqib 回答，我使用Ionic Base64那个路径，我得到这个：

在此处输入图像描述

现在问题解决了！

标签： angularfilepdfionic-frameworkbase64

解决方案

使用base64插件Base64将您的文件转换为 base64 并将其发送到服务器。将您的 FilePath 传递给该插件，它会将您的文件转换为 base64。PS：我建议您上传文件，因为它不使用base64。它将提高您的应用程序性能。

import { Base64 } from '@ionic-native/base64/ngx';

constructor(private base64: Base64) { }

...

let filePath: string = 'file:///...';
this.base64.encodeFile(filePath).then((base64File: string) => {
  console.log(base64File);
}, (err) => {
  console.log(err);
});

推荐阅读