I: я пытаюсь использовать функцию 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, тоже проблема, так что это не с моего телефона.
У кого-нибудь есть идеи? Если у вас есть вопросы, на которые я не ответил, не стесняйтесь спрашивать.






Обратитесь к этому коду, я сделал перемещение изображения в указанную папку с этим кодом. хоп, это поможет тебе ..
вот мой код:
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();
}
Спасибо, это лучше, чем мой код, он создает каталог и перемещает в него фотографию, но проблема в том, что когда я пытаюсь показать фотографию в html, я ничего не вижу, я пытался увидеть путь в теге img , это было правильно, и если я попытался показать изображение из папки с ресурсами проекта, оно отображается, но на основе сделанного изображения оно не работает. Вы хоть представляете, почему это происходит? мой HTML по-прежнему такой же, как и тот, который упоминается в вопросе
Это происходит потому, что вы не можете отображать изображение непосредственно с локального пути, вместо этого вам нужно сначала прочитать это изображение с вашего локального пути (путь к устройству Android), сохранить результат в переменной, а затем присвоить эту переменную <img src = "variable here"> .. Я тоже это сделал, я делюсь с вами своим кодом. хм, это поможет тебе.
Здесь я создал для вас демо, этот код делает снимок с камеры и сохраняет его в папку, затем считывает это изображение с локального пути и отображается на экране, я тоже тестировал, отлично работает для меня, теперь это должно работать хорошо.
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-адрес данных, но без изображения, показывает только маленький значок сломанного изображения
и отображение этого значка занимает очень много времени, пока он не сгенерирует URL-адрес данных base64
вы можете поделиться своим кодом? так что я могу понять, что не так ..!
я прокомментировал предыдущую функцию this.toDataUrl, потому что теперь я использую последнюю из предоставленных вами
я отредактировал свой ответ, просмотрите обновленный ответ .. :)
Я скопировал ваш код и сделал его таким же, как в TS и HTML, изображение по-прежнему не отображается, посмотрите вопрос desc. Я обновил изображение того, что мне показывают после того, как я добавил ваш код.
вы делаете это с помощью android или iphone? я использую андроид
Я также использую телефон Android ... код должен работать, не знаю, почему он не работает ... сделайте одно усилие, создайте новый проект и скопируйте мой код в home.ts & home.html, вам также необходимо установить пакеты: камера, файл, передача файлов, затем запустить. и дайте мне знать, работает это или нет. это займет максимум 15-20 минут, но мы будем иметь представление о том, что идет не так… либо код, либо что-то еще.
вы можете скачать мою демонстрацию по этой ссылке: ссылка
Я уже пробовал это, и он работает в новом проекте, я думаю, что это проблема с версией плагинов, однако я разберусь, большое спасибо за вашу помощь. :)
Спасибо за ответ, я попробую и обновлю вас.