Проблема с функцией перемещения файлов ionic 3

Проблема с функцией перемещения файлов ionic 3I: я пытаюсь использовать функцию moveFile, которая предоставляется из файлового собственного плагина, я не могу загружать скриншоты, так как это частный проект, принадлежащий моей компании, но я постараюсь объяснить как можно больше Я использую собственный плагин камеры для съемки фотографий, камера работает очень хорошо, и фотографии отображаются, но когда я пытаюсь использовать метод встроенного плагина файла (moveFile) просто для перемещения сделанных фотографий в каталог файлов, а не в кеш, ничего не происходит! file и fileError импортируются в TS страницы, файл также предоставляется в модуле приложения

Вот мой 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.info("Error in Image Get Path---");
          console.info(JSON.stringify(err));
        });
    }, (err) => {
    });
  // this.toDataURL(this.imageUrl, function (dataUrl) {
  //  console.info('RESULT:' + dataUrl);
  //  this.images.push(this.imageUrl);
  // });
 }, (err) => {
  console.info(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>

Как вы можете видеть, я попытался просмотреть 4 параметра на экране со строкой photoError, и все выглядит очень хорошо, старый путь правильный, имя, новый путь и новое имя правильные, но изображение не перемещается из папки изображений я обнаружил, что папка с файлами на моем телефоне пуста, а изображение все еще находится в папке изображений, строка imageUrl также показывает правильный путь к изображению (новый), когда я пытаюсь установить imageUrl на старый путь, также изображение не отображается, я пробовал приложение на другом устройстве Android, тоже проблема, так что это не с моего телефона.

У кого-нибудь есть идеи? Если у вас есть вопросы, на которые я не ответил, не стесняйтесь спрашивать.

Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
0
511
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Обратитесь к этому коду, я сделал перемещение изображения в указанную папку с этим кодом. хоп, это поможет тебе ..
вот мой код:

  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.info("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.info("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.info('RESULT:' + dataUrl);
        });
    }, (err) => {
        console.info(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();
}

Спасибо за ответ, я попробую и обновлю вас.

Mohamed Wahshey 17.09.2018 18:41

Спасибо, это лучше, чем мой код, он создает каталог и перемещает в него фотографию, но проблема в том, что когда я пытаюсь показать фотографию в html, я ничего не вижу, я пытался увидеть путь в теге img , это было правильно, и если я попытался показать изображение из папки с ресурсами проекта, оно отображается, но на основе сделанного изображения оно не работает. Вы хоть представляете, почему это происходит? мой HTML по-прежнему такой же, как и тот, который упоминается в вопросе

Mohamed Wahshey 18.09.2018 11:54

Это происходит потому, что вы не можете отображать изображение непосредственно с локального пути, вместо этого вам нужно сначала прочитать это изображение с вашего локального пути (путь к устройству Android), сохранить результат в переменной, а затем присвоить эту переменную <img src = "variable here"> .. Я тоже это сделал, я делюсь с вами своим кодом. хм, это поможет тебе.

Tej Patel 19.09.2018 09:36
Ответ принят как подходящий

Здесь я создал для вас демо, этот код делает снимок с камеры и сохраняет его в папку, затем считывает это изображение с локального пути и отображается на экране, я тоже тестировал, отлично работает для меня, теперь это должно работать хорошо.

Home.ts

Убедитесь, что вы импортировали все пакеты

импортировать {Компонент} из '@ angular / core';
импортировать {NavController, ToastController} из 'ionic-angular';
импортировать {Camera, CameraOptions} из "@ ionic-native / camera";
импортировать {файл} из '@ ionic-native / file';

export class HomePage {

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

конструктор (общедоступный navCtrl: NavController, частный файл: Файл, частная камера: камера private 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.info("checkDir: Error");
                console.info(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.info("Directory Creation Error:");
                    console.info(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.info("Image Copy Failed");
                console.info(JSON.stringify(err));
                this.presentToast("Image Copy Failed");
            });
        //Complete File Move Code

        this.toDataURL(this.imageURI, function (dataUrl) {
            console.info('RESULT:' + dataUrl);
        });
    }, (err) => {
        console.info(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>

И теперь мы готовы к работе, просто запустите устройство, у вас будет вывод, как вы хотите.

Заяц, я также прикрепил вывод своего кода.

Да, теперь он показывает URL-адрес данных, но без изображения, показывает только маленький значок сломанного изображения

Mohamed Wahshey 19.09.2018 18:20

и отображение этого значка занимает очень много времени, пока он не сгенерирует URL-адрес данных base64

Mohamed Wahshey 19.09.2018 18:21

вы можете поделиться своим кодом? так что я могу понять, что не так ..!

Tej Patel 20.09.2018 06:54

я прокомментировал предыдущую функцию this.toDataUrl, потому что теперь я использую последнюю из предоставленных вами

Mohamed Wahshey 20.09.2018 10:17

я отредактировал свой ответ, просмотрите обновленный ответ .. :)

Tej Patel 20.09.2018 12:30

Я скопировал ваш код и сделал его таким же, как в TS и HTML, изображение по-прежнему не отображается, посмотрите вопрос desc. Я обновил изображение того, что мне показывают после того, как я добавил ваш код.

Mohamed Wahshey 20.09.2018 14:08

вы делаете это с помощью android или iphone? я использую андроид

Mohamed Wahshey 20.09.2018 14:21

Я также использую телефон Android ... код должен работать, не знаю, почему он не работает ... сделайте одно усилие, создайте новый проект и скопируйте мой код в home.ts & home.html, вам также необходимо установить пакеты: камера, файл, передача файлов, затем запустить. и дайте мне знать, работает это или нет. это займет максимум 15-20 минут, но мы будем иметь представление о том, что идет не так… либо код, либо что-то еще.

Tej Patel 21.09.2018 07:55

вы можете скачать мою демонстрацию по этой ссылке: ссылка

Tej Patel 21.09.2018 08:01

Я уже пробовал это, и он работает в новом проекте, я думаю, что это проблема с версией плагинов, однако я разберусь, большое спасибо за вашу помощь. :)

Mohamed Wahshey 23.09.2018 10:07

Другие вопросы по теме