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

Posted 2023-03-13

【中文标题】在ionic2中上传之前如何获取文件名和mime类型？

【英文标题】：How to get file name and mime type before upload in ionic2?

【发布时间】：2018-04-08 14:11:55

【问题描述】：

我正在尝试使用 ionic/file-chooser 插件的帮助上传文件。一切都很完美，直到我没有要求上传 doc 或 pdf 文件。 我正在使用 ionic 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 返回类似这样的内容 -

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

【参考方案1】：

第一个解决方案

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

首先你需要安装以下插件：

fileChooser filePath 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，可以使用filePath插件的resolveNativePath(uri)方法获取文件路径，然后使用subString获取文件名和类型。

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

【讨论】：

清晰宜人