如何在ionic2上传之前获取文件名和mime类型？

Question

我试图通过使用ionic / file-chooser插件来上传文件。一切都很完美，直到我没有要求上传doc或pdf文件。我使用离子3.12.0和cordova 7.0.1。

 const fileTransfer: FileTransferObject = this.transfer.create();
    let options: FileUploadOptions = {
      fileKey: 'files0',
      fileName: 'name.jpg',
      params: {
        Authkey: this.CS.auth_key,
        Token: this.CS.token,
        group_id: this.CS.activeGroupId,
        Userid: this.CS.userId
      }
    };
    this.fileChooser.open()
      .then(uri => {
        this.CS.show_loader();
        //alert(uri );
        this.file.resolveLocalFilesystemUrl(uri)
          .then((files)=> {
          alert(JSON.stringify(files, null, 4));
        }).catch((err) => {
          alert(JSON.stringify(err, null, 4));
        });
        //let name = uri.split("/");
        //options.fileName = name[name.length - 1];
       // alert(options.fileName);
        fileTransfer.upload(uri, this.CS.base_url + 'groups/uploadChat', options)
          .then((data) => {
            this.CS.hide_loader();
            this.res = data;
            //alert(JSON.stringify(data, null, 4));
            let d = JSON.parse(this.res.response);

            if(d.status == 1){
              let a = {
                member_id: this.user_id,
                imageLink: this.groupChatData.loginUserData.imageLink,
                message: '',
                attachment: d.data[0].attachment,
                member_name: this.CS.userData.name,
                mime_type: d.data[0].mime_type,
                attachment_imageUrl: d.data[0].attachment_imageUrl,
                attachment_linkUrl: d.data[0].attachment_linkUrl,
                send_at: Date.now()
              };
              this.group_chat.push(a);
              setTimeout(() => this.content.scrollToBottom(), 200);
            }else{
              this.CS.alertMessage("error", this.res.response.message);
            }

          }, (err) => {
            alert(JSON.stringify(err, null, 4));
          })
      })
      .catch(e => alert(JSON.stringify(e, null, 4)));

resolveLocalFilesystemUrl返回这样的东西 -

既没有文件名也没有文件类型，那么如何将文件名发送到服务器？

Answer 1

第一解决方案

要获取文件名和文件mime，请尝试以下操作：

首先，您需要安装以下插件：

1. fileChooser
2. filePath
3. file

然后你可以做以下事情：

  this.fileChooser.open().then(uri =>
    {
      console.log(uri);
      this.filePath.resolveNativePath(uri).then(filePath =>
        {
          this.filesPath = filePath;
          this.file.resolveLocalFilesystemUrl(filePath).then(fileInfo =>
            {
              let files = fileInfo as FileEntry;
              files.file(success =>
                {
                  this.fileType   = success.type;
                  this.filesName  = success.name;
                });
            },err =>
            {
              console.log(err);
              throw err;
            });
        },err =>
        {
          console.log(err);
          throw err;
        });
    },err =>
    {
      console.log(err);
      throw err;
    });

这适用于android，fileChooser.open()插件将打开文件系统，因此您可以选择一个文件，filePath.resolveNativePath(uri)将为您提供文件的路径。

resolveLocalFilesystemUrl(filePath)方法将为您提供有关该问题所示文件的信息。它还返回类型为Entry的Promise，它不包含名称和类型。

因此，您需要使用as关键字将其强制转换为包含FileEntry和name的type。

---

二解决方案

  fileUpload()
 {
 this.arrayType = ["txt", "pdf", "doc", "docx", "xls", "xlsx", "rtf", "gif", "csv"];
if(this.platform.is("ios"))
{
  this.filePicker.pickFile().then(uri=>
  {
    console.log(uri);
    this.filesPath  = uri;
    this.fileName   = filesPath.substring(filesPath.lastIndexOf("/") + 1);
    this.fileType   = this.fileName.substring(this.fileName.lastIndexOf(".") + 1);
  },err=>
  {
    console.log(err);
    throw err;
  });
}
else if(this.platform.is("android"))
{
  this.fileChooser.open().then(uri =>
  {
    console.log(uri);
    this.paths = uri;
    this.filePath.resolveNativePath(uri).then(filePath =>
    {
      console.log(filePath);
      this.filesPath  = filePath;
      this.fileName   = filesPath.substring(filesPath.lastIndexOf("/") + 1);
      this.fileType   = this.fileName.substring(this.fileName.lastIndexOf(".") + 1);
      if(this.arrayType.indexOf(this.fileType) > -1)
      {
       console.log("accepted type");
      }
    },err=>
    {
      console.log(err);
      throw err;
    });
  },err=>
  {
    console.log(err);
    throw err;
  });
  }
}

这个解决方案适用于ios和android，首先你检查用户正在使用哪个平台，然后使用filepicker插件，你可以检索文件并使用subString你可以得到名称和类型。关于android，你可以使用resolveNativePath(uri)插件的filePath方法来获取文件的路径，然后使用subString你可以获得名称和类型。

您还可以检查文件的类型是否在类型数组中。