如何从设备中选择多张图片?
How to pick multiple images from device?
如果我创建一个简单的项目:
ionic start MyApp
并添加 ImagePicker
插件:
ionic plugin add https://github.com/wymsee/cordova-imagePicker.git -save
然后只需将 this example www folder 复制到项目中并执行:
ionic platform add android
ionic build android
ionic run android
一切正常。我可以按预期选择多张图片而不会出现任何错误。
到目前为止一切顺利。现在我试图将它包含到我的项目中,所以我添加了 ImagePicker
插件。现在这是我的插件列表:
ionic plugin ls
com.synconset.imagepicker 1.0.6 "ImagePicker"
cordova-plugin-camera 1.1.0 "Camera"
cordova-plugin-device 1.0.0 "Device"
cordova-plugin-dialogs 1.1.0 "Notification"
cordova-plugin-splashscreen 2.0.0 "Splashscreen"
cordova-plugin-statusbar 1.0.0 "StatusBar"
cordova-plugin-vibration 1.1.0 "Vibration"
cordova-plugin-whitelist 1.0.0 "Whitelist"
我创建了一个新模块:
angular.module('App.ImageSelect', [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.imageSelect', {
url: "/products/prints/pola/imageSelect",
views: {
'menuContent': {
templateUrl: "modules/products/prints/pola/imageSelect/imageSelect.html",
controller: 'ImageSelectController'
}
}
});
})
.controller('ImageSelectController', function ($scope, $cordovaImagePicker) {
$scope.images = [];
$scope.selectImages = function () {
$cordovaImagePicker.getPictures(
function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
$scope.images.push(results[i]);
}
if (!$scope.$$phase) {
$scope.$apply();
}
},
function (error) {
console.log('Error: ' + error);
}
);
};
});
如您所见,它是我从 here 复制的完全相同的控制器,它在简单的测试项目中工作。
出于任何可疑原因,这不起作用。我总是收到错误消息:
TypeError: Cannot read property 'getPictures' of undefined
那有什么意义呢?我在两个项目中使用完全相同的代码。在一个中,一切都在工作,而在另一个中,一切都在工作。我尝试了描述的所有示例 here 但它总是一样。
在您的示例中,您正在注入 $cordovaCamera
,但是图标使用 $cordovaImagePicker
。此外,在您的示例中,您使用 window
对象中的对象 imagePicker
。 window
对象不是你想要的。
尝试注入正确的依赖项 $cordovaImagePicker
并改用其中的方法 $cordovaImagePicker.getPictures
。
我检查了你的项目,你的 index.html 不见了 cordova.js
。所以 none 的插件正在加载或初始化。
只需在加载 ng-cordova.js.
下方的 index.html 中添加以下行
<script src="cordova.js"></script>
如果我创建一个简单的项目:
ionic start MyApp
并添加 ImagePicker
插件:
ionic plugin add https://github.com/wymsee/cordova-imagePicker.git -save
然后只需将 this example www folder 复制到项目中并执行:
ionic platform add android
ionic build android
ionic run android
一切正常。我可以按预期选择多张图片而不会出现任何错误。
到目前为止一切顺利。现在我试图将它包含到我的项目中,所以我添加了 ImagePicker
插件。现在这是我的插件列表:
ionic plugin ls
com.synconset.imagepicker 1.0.6 "ImagePicker"
cordova-plugin-camera 1.1.0 "Camera"
cordova-plugin-device 1.0.0 "Device"
cordova-plugin-dialogs 1.1.0 "Notification"
cordova-plugin-splashscreen 2.0.0 "Splashscreen"
cordova-plugin-statusbar 1.0.0 "StatusBar"
cordova-plugin-vibration 1.1.0 "Vibration"
cordova-plugin-whitelist 1.0.0 "Whitelist"
我创建了一个新模块:
angular.module('App.ImageSelect', [])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('app.imageSelect', {
url: "/products/prints/pola/imageSelect",
views: {
'menuContent': {
templateUrl: "modules/products/prints/pola/imageSelect/imageSelect.html",
controller: 'ImageSelectController'
}
}
});
})
.controller('ImageSelectController', function ($scope, $cordovaImagePicker) {
$scope.images = [];
$scope.selectImages = function () {
$cordovaImagePicker.getPictures(
function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
$scope.images.push(results[i]);
}
if (!$scope.$$phase) {
$scope.$apply();
}
},
function (error) {
console.log('Error: ' + error);
}
);
};
});
如您所见,它是我从 here 复制的完全相同的控制器,它在简单的测试项目中工作。
出于任何可疑原因,这不起作用。我总是收到错误消息:
TypeError: Cannot read property 'getPictures' of undefined
那有什么意义呢?我在两个项目中使用完全相同的代码。在一个中,一切都在工作,而在另一个中,一切都在工作。我尝试了描述的所有示例 here 但它总是一样。
在您的示例中,您正在注入 $cordovaCamera
,但是图标使用 $cordovaImagePicker
。此外,在您的示例中,您使用 window
对象中的对象 imagePicker
。 window
对象不是你想要的。
尝试注入正确的依赖项 $cordovaImagePicker
并改用其中的方法 $cordovaImagePicker.getPictures
。
我检查了你的项目,你的 index.html 不见了 cordova.js
。所以 none 的插件正在加载或初始化。
只需在加载 ng-cordova.js.
<script src="cordova.js"></script>