1
我曾嘗試npm install @ionic-native/core --savemain.js：61208未捕獲的錯誤：無法找到模塊 「離子天然的」
npm install ionic-native --save
類型代碼腳本類型：
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import{HomePage}from '../home/home';
import { ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Camera, File, Transfer, FilePath } from 'ionic-native';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
declare var cordova: any;
/**
* Generated class for the SelectImage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-select-image',
templateUrl: 'select-image.html',
})
export class SelectImage {
category:any
sub_category:any
area:any
street:any
station:any
price:any
rupees_in:any
description:any
data:any;
fetch:any[];
lastImage: string = null;
loading: Loading;
Camera:any;
File:any;
FilePath:any;
fileTransfer:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,public http:Http) {
this.category=this.navParams.get("category");
this.sub_category=this.navParams.get("sub_category");
this.area=this.navParams.get("area");
this.street=this.navParams.get("street");
this.station=this.navParams.get("station");
// console.log(this.category);
// console.log(this.sub_category);
// console.log(this.area);
// console.log(this.street);
// console.log(this.station);
this.data={};
this.data.price="";
this.data.rupees_in="";
this.data.description="";
// this.Camera="";
// this.File="";
// this.FilePath="";
// this.fileTransfer="";
}
ionViewDidLoad() {
console.log('ionViewDidLoad SelectImage');
}
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler:() => {
this.takePicture(Camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler:() => {
this.takePicture(Camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType) {
// Create options for the Camera Dialog
var options = {
quality: 100,
sourceType: sourceType,
saveToPhotoAlbum: false,
correctOrientation: true
};
// Get the data of an image
Camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android') && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
FilePath.resolveNativePath(imagePath)
.then(filePath => {
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
});
} else {
var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
}
}, (err) => {
this.presentToast('Error while selecting image.');
});
}
// Create a new name for the image
private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
File.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
this.lastImage = newFileName;
}, error => {
this.presentToast('Error while storing file.');
});
}
private presentToast(text) {
let toast = this.toastCtrl.create({
message: text,
duration: 3000,
position: 'top'
});
toast.present();
}
// Always get the accurate path to your apps folder
public pathForImage(img) {
if (img === null) {
return '';
} else {
return cordova.file.dataDirectory + img;
}
}
public uploadImage() {
// Destination URL
var url = "http://progressiveit.in/mumbai_flat/property_details_img.php";
// File for Upload
var targetPath = this.pathForImage(this.lastImage);
// File name only
var filename = this.lastImage;
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params : {'fileName': filename}
};
const fileTransfer = new Transfer();
this.loading = this.loadingCtrl.create({
content: 'Uploading...',
});
this.loading.present();
// Use the FileTransfer to upload the image
fileTransfer.upload(targetPath, url, options).then(data => {
this.loading.dismissAll()
this.presentToast('Image succesful uploaded.');
}, err => {
this.loading.dismissAll()
this.presentToast('Error while uploading file.');
});
}
}
PHP代碼：
<?php
header('Access-Control-Allow-Origin: *');
$target_path = "doc/";
$target_path = $target_path . basename($_FILES['file']['name']);
if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
echo "Upload and move success";
} else {
echo $target_path;
echo "There was an error uploading the file, please try again!";
}
?>
即使我嘗試過類型腳本 這個時候其他的方法它沒有顯示不顯示這個main.js:61208 Uncaught Error: Cannot find module "ionic-native"錯誤，但在上傳自己的形象它不工作它只是顯示加載...
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import{HomePage}from '../home/home';
import { ActionSheetController, ToastController, Platform, LoadingController, Loading } from 'ionic-angular';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { File } from '@ionic-native/file';
import { Camera, CameraOptions } from '@ionic-native/camera';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
declare var cordova: any;
/**
* Generated class for the SelectImage page.
*
* See http://ionicframework.com/docs/components/#navigation for more info
* on Ionic pages and navigation.
*/
@Component({
selector: 'page-select-image',
templateUrl: 'select-image.html',
})
export class SelectImage {
category:any
sub_category:any
area:any
street:any
station:any
price:any
rupees_in:any
description:any
data:any;
fetch:any[];
lastImage: string = null;
loading: Loading;
Camera:any;
File:any;
FilePath:any;
fileTransfer:any;
constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,public http:Http,private camera: Camera,private file: File,private filePath: FilePath,private transfer: Transfer) {
this.category=this.navParams.get("category");
this.sub_category=this.navParams.get("sub_category");
this.area=this.navParams.get("area");
this.street=this.navParams.get("street");
this.station=this.navParams.get("station");
// console.log(this.category);
// console.log(this.sub_category);
// console.log(this.area);
// console.log(this.street);
// console.log(this.station);
this.data={};
this.data.price="";
this.data.rupees_in="";
this.data.description="";
// this.Camera="";
// this.File="";
// this.FilePath="";
// this.fileTransfer="";
}
ionViewDidLoad() {
console.log('ionViewDidLoad SelectImage');
}
public presentActionSheet() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Select Image Source',
buttons: [
{
text: 'Load from Library',
handler:() => {
this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
}
},
{
text: 'Use Camera',
handler:() => {
this.takePicture(this.camera.PictureSourceType.CAMERA);
}
},
{
text: 'Cancel',
role: 'cancel'
}
]
});
actionSheet.present();
}
public takePicture(sourceType) {
// Create options for the Camera Dialog
var options = {
quality: 100,
sourceType: sourceType,
saveToPhotoAlbum: false,
correctOrientation: true
};
// Get the data of an image
this.camera.getPicture(options).then((imagePath) => {
// Special handling for Android library
if (this.platform.is('android') && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
this.filePath.resolveNativePath(imagePath)
.then(filePath => {
let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let currentName = imagePath.substring(imagePath.lastIndexOf('/') + 1, imagePath.lastIndexOf('?'));
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
});
} else {
var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
}
}, (err) => {
this.presentToast('Error while selecting image.');
});
}
// Create a new name for the image
private createFileName() {
var d = new Date(),
n = d.getTime(),
newFileName = n + ".jpg";
return newFileName;
}
// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
this.lastImage = newFileName;
}, error => {
this.presentToast('Error while storing file.');
});
}
private presentToast(text) {
let toast = this.toastCtrl.create({
message: text,
duration: 3000,
position: 'top'
});
toast.present();
}
// Always get the accurate path to your apps folder
public pathForImage(img) {
if (img === null) {
return '';
} else {
return cordova.file.dataDirectory + img;
}
}
public uploadImage() {
// Destination URL
var url = "http://progressiveit.in/mumbai_flat/property_details_img.php";
// File for Upload
var targetPath = this.pathForImage(this.lastImage);
// File name only
var filename = this.lastImage;
var options = {
fileKey: "file",
fileName: filename,
chunkedMode: false,
mimeType: "multipart/form-data",
params : {'fileName': filename}
};
const fileTransfer = new Transfer();
this.loading = this.loadingCtrl.create({
content: 'Uploading...',
});
this.loading.present();
// Use the FileTransfer to upload the image
this.fileTransfer.upload(targetPath, url, options).then(data => {
this.loading.dismissAll()
this.presentToast('Image succesful uploaded.');
}, err => {
this.loading.dismissAll()
this.presentToast('Error while uploading file.');
});
}
}
的package.json文件
{
"_args": [
[
{
"raw": "[email protected]^3.5.0",
"scope": null,
"escapedName": "ionic-native",
"name": "ionic-native",
"rawSpec": "^3.5.0",
"spec": ">=3.5.0 <4.0.0",
"type": "range"
},
"F:\\Progressive\\ionic\\Mumbai_flat"
]
],
"_from": "[email protected]>=3.5.0 <4.0.0",
"_id": "[email protected]",
"_inCache": true,
"_location": "/ionic-native",
"_nodeVersion": "7.4.0",
"_npmOperationalInternal": {
"host": "packages-18-east.internal.npmjs.com",
"tmp": "tmp/ionic-native-3.5.0.tgz_1492552188808_0.35551156126894057"
},
"_npmUser": {
"name": "ihadeed",
"email": "[email protected]"
},
"_npmVersion": "4.0.5",
"_phantomChildren": {},
"_requested": {
"raw": "[email protected]^3.5.0",
"scope": null,
"escapedName": "ionic-native",
"name": "ionic-native",
"rawSpec": "^3.5.0",
"spec": ">=3.5.0 <4.0.0",
"type": "range"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/ionic-native/-/ionic-native-3.5.0.tgz",
"_shasum": "08d9bd2488d6bddff0c1c594dc4e647242efbd55",
"_shrinkwrap": null,
"_spec": "[email protected]^3.5.0",
"_where": "F:\\Progressive\\ionic\\Mumbai_flat",
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
},
"dependencies": {},
"description": "Native plugin wrappers for Cordova and Ionic with TypeScript, ES6+, Promise and Observable support",
"devDependencies": {
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"canonical-path": "0.0.2",
"child-process-promise": "2.2.0",
"conventional-changelog-cli": "1.2.0",
"cpr": "2.0.2",
"cz-conventional-changelog": "1.2.0",
"decamelize": "1.2.0",
"dgeni": "0.4.7",
"dgeni-packages": "0.16.10",
"fs-extra": "2.0.0",
"fs-extra-promise": "0.4.1",
"gulp": "3.9.1",
"gulp-rename": "1.2.2",
"gulp-replace": "0.5.4",
"gulp-tslint": "6.1.2",
"lodash": "4.17.4",
"minimist": "1.1.3",
"node-html-encoder": "0.0.2",
"q": "1.4.1",
"queue": "4.2.1",
"rimraf": "2.5.4",
"rxjs": "5.0.1",
"semver": "5.3.0",
"tslint": "3.15.1",
"tslint-ionic-rules": "0.0.7",
"typescript": "2.0.09",
"zone.js": "0.7.2"
},
"directories": {},
"dist": {
"shasum": "08d9bd2488d6bddff0c1c594dc4e647242efbd55",
"tarball": "https://registry.npmjs.org/ionic-native/-/ionic-native-3.5.0.tgz"
},
"gitHead": "7df7a557da3cd2ea2064fb0343dcda6a4b6b7949",
"license": "MIT",
"maintainers": [
{
"name": "ihadeed",
"email": "[email protected]"
},
{
"name": "ionicjs",
"email": "[email protected]"
},
{
"name": "maxlynch",
"email": "[email protected]"
},
{
"name": "tlancina",
"email": "[email protected]"
}
],
"name": "ionic-native",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"scripts": {
"build": "npm run clean && npm run lint && npm run build:core && npm run build:modules",
"build:core": "ngc -p scripts/build/tsconfig-core.json",
"build:modules": "node scripts/build/build.js",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
"clean": "rimraf dist .tmp",
"lint": "gulp lint",
"npmpub": "node scripts/build/publish.js",
"postchangelog": "git commit -am \"chore(): update changelog\"",
"shipit": "npm run build && gulp readmes && npm run npmpub",
"start": "npm run test:watch"
},
"version": "3.5.0"
}
您可以將您的package.json更新離子本土？ –
增加了@suraj請檢查 – BMK007
我的意思是你的項目的package.json不離子本地's package.json –