Ionic - 文件上传仅适用于某些设备

时间:2017-09-27 11:57:48

标签: angular cordova typescript ionic-framework cordova-plugins

我想将文件上传到PHP脚本。

问题:在Samsung Galaxy S7上,代码运行正常。不幸的是,在Lenovo Phab 2 ProNexus 5X上它不起作用,但在应用程序中运行代码时没有任何错误。

在服务器端,我注意到Samsung Galaxy S7上的应用正在正确发送文件,而Lenovo Phab 2 ProNexus 5X只是发送文件名。

Samsung Galaxy S7

 upload response: Array
(
    [file] => Array
        (
            [name] => 1506589380396.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpDKfBfF
            [error] => 0
            [size] => 1032669
        )

)
Upload and move success

Lenovo Phab 2 ProNexus 5X

upload response: uploads/1506589002819.jpgArray
(
    [file] => Array
        (
            [name] => 1506589002819.jpg
            [type] => 
            [tmp_name] => 
            [error] => 1
            [size] => 0
        )

)

我已使用tutorial的代码将文件上传到服务器。但它似乎不是代码的问题,因为另一个tutorial最终得到相同的结果。

Samsung Galaxy S7上,代码运行正常。不幸的是,在Lenovo Phab 2 ProNexus 5X上它不起作用,但运行代码没有任何错误。看起来他们甚至没有将文件发送到服务器。 在这两个设备上,我可以在应用程序中显示图像,我可以在TotalCommand等文件浏览器应用程序中搜索它们。

问题Lenovo Phab 2 ProNexus 5X可能出现什么问题?请注意,所有权限都授予应用程序(内存,GPS,手机)。

这是我的代码:

   @IonicPage()
@Component({
  selector: 'page-eventlist',
  templateUrl: 'eventlist.html',
})
export class EventlistPage {
  private TAG = "EventlistPage ";

  photoPage = PhotoPage;
  eventPage = EventPage;

  events: Event[];

  loading:Loading;
  public error: string;

  constructor(
    private readonly http: Http,
    public navCtrl: NavController,
    public navParams: NavParams,
    public eventtrackerProvider: EventtrackerProvider,
    //private transfer: FileTransfer,
    private alertCtrl: AlertController,
    private modalCtrl: ModalController,
    private file: File,
    private loadingController: LoadingController,
    private platform: Platform,
    // instanciate the NetworkConnectionProvider here to make it available in the whole application
    network: NetworkConnectionProvider) {
      this.platform.ready().then(() => {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        //this.fileTransfer = this.transfer.create();
      });
  }

  async ionViewDidLoad() {
    console.log(this.TAG + "ionViewDidLoad");

    try {
      let data = await this.eventtrackerProvider.getEvents()
      this.events = data;
    } catch (err) {
      console.log(this.TAG  + err.message);
    }
  }

  async uploadImagesToServer(){
    await this.checkForNotUploadedImages();
  }

  async checkForNotUploadedImages() {

    let noPicsForUploadAvailable: Boolean;
    noPicsForUploadAvailable = true;

    this.loading = await this.loadingController.create({
      content: 'Lade hoch...',
    });
    this.loading.present();

    try {
      for(let event of this.events) {
        for(let image of event.images){
          if(image.uploadedToServer == false) {

            // upload the image to server

            this.file.resolveLocalFilesystemUrl(image.filePath + image.fileName)
              .then(entry => (<FileEntry>entry).file(file => this.readFile(file)))
              .catch(err => console.log(err));

            noPicsForUploadAvailable = false;

          }
        }
        await this.eventtrackerProvider.updateEvent(event);
      }

    } catch(err) {
      console.log(this.TAG + err.message);
      this.presentAlert(this.TAG + err.message);
    }

    await this.loading.dismiss();
    if(noPicsForUploadAvailable){
      await this.presentAlert("Es gibt aktuell keine Bilder zum Hochladen.")
    } else {
      await this.presentAlert("FileTransfer erfolgreich");
    }
  }

  private readFile(file: any) {
    const reader = new FileReader();
    reader.onloadend = () => {
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], {type: file.type});
      formData.append('file', imgBlob, file.name);
      this.postData(formData);
    };
    reader.readAsArrayBuffer(file);
  }

  private postData(formData: FormData) {
    this.http.post("http://192.168.178.111/upload.php", formData)
      .catch((e) => this.handleError(e))
      .map(response => console.log("upload response: " + response.text()))
      .finally(() => this.loading.dismiss())
      .subscribe(ok => this.presentAlert("ok"));
  }

  presentAlert(message: string){
    let alert = this.alertCtrl.create({
      title: 'Alert',
      subTitle: message,
      buttons: ['OK']
    });
    alert.present();
  }

  private handleError(error: Response | any) {
   let errMsg: string;
   if (error instanceof Response) {
     const body = error.json() || '';
     const err = body.error || JSON.stringify(body);
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
   } else {
     errMsg = error.message ? error.message : error.toString();
   }
   this.error = errMsg;
   return Observable.throw(errMsg);
  }
}

问题:这个问题是由文件系统上的拒绝权限引起的吗?这对我没有任何意义,因为在应用程序能够创建和显示图像之前没有任何问题。还有什么可能是错的?

0 个答案:

没有答案