Ionic-V1 xcode项目不显示输入中的图像
Ionic-V1 xcode项目不显示输入中的图像
提问于 2017-07-11 07:43:50
我在我的ionic V1项目上遇到了一个输入文件的问题，我正在尝试制作一个图像预览，以便在将其发送到服务器之前从用户那里获得鼠标坐标。当我使用ionic serve在浏览器中运行代码时，一切正常，但是当我在Xcode模拟器中从iPhone6设备上运行它时，它没有显示图像。有没有人知道或有过这个问题？
从web浏览器上传的图像
从iphone上传的图片
我的代码类似于Upload Image Controller：
var ctrl = angular.module('uploadImageController', []);
ctrl.controller('uploadImageController', ['$scope', '$http', '$state', function($scope, $http, $state) {
let $constructor = () => {
$scope.coordonate = {};
document.getElementById('imgPreview').onclick = function(e) {
$scope.coordonate.x = e.pageX - $(this).offset().left;
$scope.coordonate.y = e.pageY - $(this).offset().top;
document.getElementById('imgPreview').style = "display:none;";
}
document.getElementById('firstImage').onchange = function(evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function() {
document.getElementById('imgPreview').src = fr.result;
}
$scope.uploaded = 1;
fr.readAsDataURL(files[0]);
} else {
}
}
}
$scope.add = function() {
if ($scope.uploaded) {
if ($scope.coordonate.x && $scope.coordonate.x) {
alert($scope.coordonate.x)
var f = document.getElementById('secondImage').files[0],
r = new FileReader();
console.log(f);
var formData = new FormData();
formData.append('secondImage', f);
console.log("Add function");
var f = document.getElementById('firstImage').files[0],
r = new FileReader();
console.log(f);
formData.append('firstImage', f);
formData.append('coordonatex', $scope.coordonate.x.toFixed(0));
formData.append('coordonatey', $scope.coordonate.y.toFixed(0));
document.getElementById('loader').style = "display:block;";
document.getElementById('content').style = "display:none;";
$http({ method: 'POST', url: '/uploadImage', data: formData, headers: { 'Content-Type': undefined } }).then(function(response) {
setTimeout(function() {
document.getElementById('loader').style = "display:none;";
document.getElementById('content').style = "display:block;";
$state.go('result', { img: response.data });
}, 0);
})
} else {
alert('Choose a point');
}
} else {
alert('Choose an image');
}
}
$constructor();
}])uploadImage的HTML模板：
<!Doctype html>
<ion-view title="uploadImage">
<ion-content>
<div id="loader" class="loader"></div>
<div style="height: 90px"></div>
<div class="animate-bottom" id="content">
<div class="container-fuild" style="margin:auto; color:white;text-align:center;">
<title>Upload new File</title>
<div class="row">
<div class="col-xs-12">
<h1>Upload first image</h1></div>
</div>
<div class="row">
<div class="col-xs-12"><img src="" id="imgPreview" /></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<input type="file" id="firstImage" name="file"/>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>Upload second image</h1></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<input type="file" id="secondImage" name="secondImage" />
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-5">
<button type="button" class="btn btn-primary" ng-click="add()">Simulate</button>
</div>
</div>
</div>
</ion-content>
</ion-view>非常感谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-07-13 14:00:42
我在苹果设备上也遇到了类似的问题，这是由于内容安全政策的原因。在index.html中添加下面的代码对我很有帮助。
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' gap: ; img-src * 'self' data:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; media-src *; style-src 'self' 'unsafe-inline' *">设备调用gap:ready似乎是问题所在。为此，请在前面提到的CSP中包含'gap‘。希望这对你也有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45023238
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号