Question

我的离子V1项目有一个输入文件有问题，我正在尝试进行图像预览，以便在将用户发送到服务器之前获取用户的鼠标坐标。当我使用ionic serve在浏览器中运行代码时，一切正常，但是当我从Xcode模拟器中的Iphone 6设备运行它时，它不会向我显示图像。有人知道或有这个问题吗？

从网络浏览器上传图片

从iphone上传图片

我的代码看起来像这样上传图像控制器：

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>

非常感谢！

Answer 1

我在Apple设备上也遇到了类似的问题，这是由于内容安全策略。在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' *">

设备调用差距：准备似乎是问题。为此，如上所述，在CSP中包含“差距”。希望这对你也有帮助。

Ionic-V1 xcode项目不显示输入图像

1 个答案: