Question

我正在尝试使用由文件本机插件提供的moveFile函数，由于它是属于我公司的私人项目，因此我无法上传屏幕截图，但我会尽力解释我使用相机本机插件拍摄照片，相机工作得很好，并且显示了照片，但是当我尝试使用文件本机插件（moveFile）方法只是将拍摄的照片移到文件目录而不是缓存时，什么也没发生！在TS页面中导入了file和fileError，同时在App Module中也提供了文件

这是我的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个参数，并且一切看起来都很好，旧路径正确，名称，新路径和新名称正确，但是图像没有从图片文件夹中移出，我发现手机上的文件夹为空，并且图像仍在图片文件夹中，当我尝试设置时，imageUrl字符串也显示了图像的正确路径（新路径） imageUrl到旧路径，也没有图像显示，我在另一台Android设备上尝试了该应用程序，同样是问题，因此不是从我的手机上获取的。

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

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

在这里我为您创建了Demo，此代码从相机拍摄照片并将其保存到文件夹中，然后从本地路径读取该图像并显示在屏幕上，我也进行了测试，对我来说效果很好，现在应该可以正常工作

Home.ts

确保已导入所有软件包

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

export class HomePage {

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

constructor（公共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函数的问题

2 个答案: