ionic 3 movefile 函数的问题

Question

我正在尝试使用文件原生插件提供的 moveFile 功能，我无法上传屏幕截图，因为它是属于我公司的私人项目，但我会尽可能多地解释我使用相机原生插件拍照，相机工作得很好并且照片正在显示，但是当我尝试使用文件原生插件（moveFile）方法只是将拍摄的照片移动到文件目录而不是缓存时，没有任何反应！页面TS中引入了file和fileError，App Module中也提供了file

这是我的 TS（更新）：

getImageFromCamera() {
const options: CameraOptions = {
  quality: 20,
  saveToPhotoAlbum: true,
  destinationType: this.camera.DestinationType.FILE_URI,
  sourceType: this.camera.PictureSourceType.CAMERA,
  encodingType: this.camera.EncodingType.JPEG,
  allowEdit: true
};
this.camera.getPicture(options).then((imageData) => {
  this.imageUrl = imageData;
  let imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
  this.file.checkDir(this.file.externalRootDirectory, 'DEMO')
    .then(() => {
      this.fileCreated = true;
    }, (err) => {
    });
  if (this.fileCreated) {
  }
  else {
    this.file.createDir(this.file.externalRootDirectory, "DEMO", true)
      .then((res) => {
      }, (err) => {
      });
  }
  let tempPath = this.imageUrl.substr(0, this.imageUrl.lastIndexOf('/') +1);
  let androidPath = this.file.externalRootDirectory + '/DEMO/';
  this.file.moveFile(tempPath, imageName, androidPath, imageName)
    .then((res) => {
      this.file.readAsDataURL(androidPath, imageName)
        .then((res) => {
          this.images.push(res);
        }, (err) => {
          console.log("Error in Image Get Path---");
          console.log(JSON.stringify(err));
        });
    }, (err) => {
    });
  // this.toDataURL(this.imageUrl, function (dataUrl) {
  //  console.log('RESULT:' + dataUrl);
  //  this.images.push(this.imageUrl);
  // });
 }, (err) => {
  console.log(JSON.stringify(err));
 });
}
toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
  let reader = new FileReader();
  reader.onloadend = function () {
    callback(reader.result);
  };
  reader.readAsDataURL(xhr.response);
 };
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}

我的HTML

<ion-item>
  <h5>Choose files to upload</h5>
  <button (tap)="getImageFromCamera()" item-end ion-button round outline 
   color="sideBar">Upload</button>
</ion-item>
<ion-slides *ngIf="images.length >= 1">
  <ion-slide style="float: left;" *ngFor="let image of images; let i = 
   index;" class="image-container">
    <ion-icon (tap)="onDeletePhoto(i)" class="icon-container" name="close- 
     circle"></ion-icon>
    <img [src]="image" width="100">
  </ion-slide>
</ion-slides>
<ion-item>

如您所见，我尝试使用 photoError 字符串查看屏幕上的 4 个参数，一切看起来都很好，旧路径是正确的，名称、新路径和新名称都是正确的，但是图片没有从图片文件夹中移出，我发现 phone 上的文件夹是空的，图片仍在图片文件夹中，imageUrl 字符串也显示图片的正确路径（新的），当我尝试将 imageUrl 设置为旧路径时，图像也没有显示，我在另一台 Android 设备上尝试了该应用程序，也是同样的问题，所以它不是来自我的 phone.

有人知道吗？如果您有任何我没有提供答案的问题，请随时提问。

Answer 1

参考这段代码，我已经用这段代码将图像移动到指定的文件夹。希望这会对你有所帮助..
这是我的代码：

  getImageFromCamera() {

    const options: CameraOptions = {
        quality: 20,
        saveToPhotoAlbum: true,
        destinationType: this.camera.DestinationType.FILE_URI,
        sourceType: this.camera.PictureSourceType.CAMERA,
        encodingType: this.camera.EncodingType.JPEG,
        allowEdit: true
    };

    this.camera.getPicture(options).then((imageData) => {

        this.imageURI = imageData;
        this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);

        // Create a folder 'DEMO' in memory location of device to store image

        this.file.checkDir(this.file.externalRootDirectory, 'DEMO')
            .then(() => {
                this.fileCreated = true;
            }, (err) => {
                console.log("checkDir: Error");
            });
        if (this.fileCreated) {
            this.presentToast("Directory Already exist");
        }
        else {
            this.file.createDir(this.file.externalRootDirectory, "DEMO", true)
                .then((res) => {
                    this.presentToast("Directory Created");
                }, (err) => {
                    console.log("Directory Creation Error:");
                });
        }

        //FILE MOVE CODE

        let tempPath = this.imageURI.substr(0, this.imageURI.lastIndexOf('/') + 1);
        let androidPath = this.file.externalRootDirectory + '/DEMO/';

        this.file.moveFile(tempPath, this.imageName, androidPath, this.imageName)
            .then((res) => {
                this.presentToast("Image Moved Successfully");

            }, (err) => {
                this.presentToast("Image Moved Failed");
            });
        //Complete File Move Code

        this.toDataURL(this.imageURI, function (dataUrl) {
            console.log('RESULT:' + dataUrl);
        });
    }, (err) => {
        console.log(JSON.stringify(err));
    });

}
 toDataURL(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        let reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

Answer 2

我在这里为你创建了演示，这段代码从相机拍摄照片并保存到文件夹中，然后从本地路径读取该图像并显示在屏幕上，我也测试过，对我来说工作正常，这应该工作现在好了

Home.ts

确保您已导入所有包

从'@angular/core'导入{组件}；
从 'ionic-angular';
导入 { NavController, ToastController } 从“@ionic-native/camera”导入{Camera, CameraOptions};
从“@ionic-native/file”导入{文件}；

export class HomePage {

public imageURI: any;
public imageName: any;
public fileCreated: boolean = false;
public imageString: any;
resultImageArray: any;

构造函数(public navCtrl: NavController, 私有文件：文件，私人相机：相机，私人 toastCtrl: ToastController,) {

}

getImageFromCamera() {


    const options: CameraOptions = {
        quality: 20,
        saveToPhotoAlbum: true,
        destinationType: this.camera.DestinationType.FILE_URI,
        sourceType: this.camera.PictureSourceType.CAMERA,
        encodingType: this.camera.EncodingType.JPEG,
        allowEdit: true
    };

    this.camera.getPicture(options).then((imageData) => {
        this.imageURI = imageData;
        this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);

        // Create a folder in memory location
        this.file.checkDir(this.file.externalRootDirectory, 'ImagesDemo')
            .then(() => {
                this.fileCreated = true;
            }, (err) => {
                console.log("checkDir: Error");
                console.log(JSON.stringify(err));
                this.presentToast("checkDir Failed");
            });
        if (this.fileCreated) {
            this.presentToast("Directory Already exist");
        }
        else {
            this.file.createDir(this.file.externalRootDirectory, "ImagesDemo", true)
                .then((res) => {
                    this.presentToast("Directory Created");
                }, (err) => {
                    console.log("Directory Creation Error:");
                    console.log(JSON.stringify(err));
                });
        }

        //FILE MOVE CODE
        let tempPath = this.imageURI.substr(0, this.imageURI.lastIndexOf('/') + 1);
        let androidPath = this.file.externalRootDirectory + '/ImagesDemo/';
        this.imageString = androidPath + this.imageName;

        this.file.moveFile(tempPath, this.imageName, androidPath, this.imageName)
            .then((res) => {
                this.presentToast("Image Saved Successfully");
                this.readImage(this.imageString);

            }, (err) => {
                console.log("Image Copy Failed");
                console.log(JSON.stringify(err));
                this.presentToast("Image Copy Failed");
            });
        //Complete File Move Code

        this.toDataURL(this.imageURI, function (dataUrl) {
            console.log('RESULT:' + dataUrl);
        });
    }, (err) => {
        console.log(JSON.stringify(err));
        this.presentToast(JSON.stringify(err));
    });
}


presentToast(msg) {
    let toast = this.toastCtrl.create({
        message: msg,
        duration: 2000
    });
    toast.present();
}

toDataURL(url, callback) {
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        let reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}



readImage(filePath) {
    let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
    let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);

    this.file.readAsDataURL(tempPath, imageName)
        .then((res) => {
            this.presentToast("Image Get Done");
            this.resultImageArray = res;
        }, (err) => {
            this.presentToast("Image Get Error");
        });
}

}

Home.html

 <button ion-button   item-end icon-start block  (click)="getImageFromCamera()">Click Here</button>


  <ion-card *ngIf=resultImageArray>
<img src="{{resultImageArray}}"/></ion-card>

现在我们准备好了，只需运行进入设备，您就会得到想要的输出。

我也附上了我的代码输出。

ionic 3 movefile 函数的问题

Issue with ionic 3 movefile function

file

typescript

ionic-framework

ionic-native

ionic3