【问题标题】:ionic upload file / capacitor / file path / readasArrayBufferionic上传文件/电容/文件路径/readasArrayBuffer
【发布时间】:2021-03-06 22:35:20
【问题描述】:

帮助:Ionic /我正在尝试将文件上传到 Firebase,但我无法读取文件帮助的内容enter image description here

【问题讨论】:

  • 代码很有帮助
  • 好的,我添加代码:home.page.ts 和 serviceFirebase.ts
  • 我认为 ReadasArrayBuffer 有问题,它仍在运行,没有任何结果 const buffer = await this.file.readAsArrayBuffer(this.filePath, this.fileName);

标签: ionic-framework


【解决方案1】:

import { Component } from '@angular/core';
import { File} from '@ionic-native/file/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';
import { FireBaseService } from 'src/app/services/firebase-service.service';
import { Plugins, FilesystemDirectory, FilesystemEncoding } from '@capacitor/core';

const { Filesystem } = Plugins;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],

})
export class HomePage {

 fileforSending ;
 fileUri  :string;
 filePath :string;
 fileName :string;
 fileType :string;
 entry;

  constructor(
    private fireService:FireBaseService,
    private fileChooser:FileChooser,
    private file :File,
    private pathConverter :FilePath) {
  }
  
  choose(){
    this.fileChooser.open()
    .then(uri => {
      //getting URI of a choosen file
      this.fileUri = uri;
      return this.file.resolveLocalFilesystemUrl(this.fileUri);

    }).then(fileEntry => {
      this.entry = fileEntry;
      this.entry.file((arg) => {
        //getting mime type of a file
        this.fileType = arg.type;
      })

    }).then(() => {
      return this.pathConverter.resolveNativePath(this.fileUri)

    }).then((filePath) => {
      //converting file URI to normal file PATH & file NAME
      this.filePath = filePath.substring(0, filePath.lastIndexOf('/'));
      this.fileName = filePath.substring(filePath.lastIndexOf('/'), filePath.length).replace("/", "");

    }).then(async () => {
      try {
        const buffer = await this.file.readAsArrayBuffer(this.filePath, this.fileName);
        await this.fireService.uploadFileToStorage(buffer, this.fileType, this.fileName);
      } catch (error) {
        alert(`Buffering failed ${JSON.stringify(error)}`)
      } finally {
        alert('finally');
      }
       }).catch(err =>  {console.log('error: ', err) });
}
}

<!-- begin snippet: js hide: false console: true babel: false -->
--------------------------火力基地服务---------- - 从'@angular/core'导入{可注射}; 从“@angular/fire/storage”导入{AngularFireStorage};
@Injectable({
  providedIn: 'root'
})
export class FireBaseService {
    
  constructor(private af: AngularFireStorage){}

  
  async uploadFileToStorage(file, type, name) {
      const randomId = Math.random()
          .toString(36)
          .substring(2, 8);

      let oMyBlob = new Blob([file], {type : type})
       const uploadTask = this.af.upload(`files/${new Date().getTime()}_${randomId}_${name}`,oMyBlob);
        console.log('upload task '+uploadTask)
        uploadTask.then(async res => {
        console.log('file upload finished!');
      }).catch(err =>  {
          console.log('file wasnt upload. Error: ' + err);
      });
  }
}

export { FireBaseService as ExportedClass };

【讨论】:

    【解决方案2】:

    从 '@angular/core' 导入 { Injectable }; 从“@angular/fire/database”导入{AngularFireDatabase};

    从“@angular/fire/storage”导入{AngularFireStorage};

    @Injectable({ 提供在:“根” }) 导出类 FireBaseService {

    constructor(private af: AngularFireStorage){}
    
    async uploadFileToStorage(file, type, name) {
        const randomId = Math.random()
            .toString(36)
            .substring(2, 8);
    
        let oMyBlob = new Blob([file], {type : type})
        
        const uploadTask = this.af.upload(
            `files/${new Date().getTime()}_${randomId}_${name}`,
            oMyBlob
        );
    
        uploadTask.then(async res => {
            console.log('file upload finished!');
        }).catch(err =>  {
            console.log('file wasnt upload. Error: ' + err);
        });
    }
    

    }

    export { FireBaseService as ExportedClass };

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-11
      • 2010-12-31
      • 2011-04-08
      • 2014-01-19
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多