1

我在我的项目中使用 ngFileUpload 和 ngImgCrop。将图片上传到桌面中的 AWS S3 似乎没有问题，但是从 iOS 上传没有通过。

控制器

$scope.uploadPic = function(dataUrl) {

        var blob = Upload.dataUrltoBlob(dataUrl, name);
        var png = new File([blob], createdDate);
        file = png;

        $scope.upload = Upload.upload({
                url: 'https://matchthecoach.s3.amazonaws.com', 
                method: 'POST',
                data: {
                    key: 'coaches/' + createdDate,
                    AWSAccessKeyId: s3.s3AccessKeyId,
                    acl: 'public-read', 
                    policy: s3.s3Policy, 
                    signature: s3.s3Signature, 
                    "Content-Type": file.type != '' ? file.type : 'image/png',
                    filename: createdDate, 
                    file: file
                }
            }).then(function(response) {
                $timeout(function() {
                    $scope.result = response.data;
                });
            }, function(response) {
                if (response.status > 0)
                    $scope.errorMsg = response.status + ':' + response.data;

            }, function (evt) {
                $scope.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        });
    };

HTML

                    <input type ="file" 
                     ngf-before-model-change="beforeResizingImages($file)"
                     ngf-select="afterResizingImages($file)"
                     ngf-select accept="image/*"
                     ngf-max-size="10MB"
                     ngf-fix-orientation="true" 
                     ngf-model-invalid="errorFile"
                     ngf-resize="{width: 520, height: 390, quality: .7, type: 'image/jpeg'}" 
                     id="picfile" name="picfile"  ng-model="picfile" class="form-control" 
                     aria-labelledby="picture file" >
                     <br>
                     <h4 class="pull-left">{{'FORM.TEXT.PICTURE' | translate}}</h4>
                     <spinner name="picturespinner" img-src="image/balls.gif"></spinner alt="spinner">
                     <i ng-show="PicForm.picfile.$error.maxSize">File too large 
                    {{errorFile.size / 10000000|number:10}}MB: max 10M</i>
                </div>
            </div>
            <div class="row">
            <div class="col-xs-9-offset-3 col-sm-10-offset-2">
                <div class="col-sm-8-offset-2"  ngf-pattern="image/*" ng-model="picfile">
                    <img-crop image="picfile | ngfDataUrl" result-image="croppedDataUrl"
                    ng-init="croppedDataUrl=''" ng-show="PicForm.picfile.$valid"  class="cropArea centered img-select" area-type="rectangle" area-min-size="{w:360,h:270}" result-image-size="{w:360,h:270}"></img-crop>
                </div>

                <div>
                    <img class="result-image" ng-src="{{croppedDataUrl}}">
                </div>
            </div>  
             </div>
             <hr>
             <div class="row">
               <div class="col-xs-9-offset-3 col-sm-10-offset-2">
               <span class="progress" ng-show="progress >= 0">
                <div class="progress-bar" role="progressbar" style="width:{{progress}}%" 
                    ng-bind="progress + '%'"></div>
                </span>
                <span ng-show="result">Upload Successful</span>
                <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
                <button class="btn btn-primary" ng-show="picfile" ng-click="uploadPic(croppedDataUrl)">Upload</button>
                <button class="btn btn-default" ng-click="picfile = null" ng-show="picfile">Remove</button>

                </div>
            </div>

在没有 ngImgCrop 的情况下，单独的 ngFileUpload 可以正常工作，但我看不出它只在桌面上工作的原因。我在 Chrome 和 Safari 中都遇到了 iPad 和 iPhone 的问题。我还没有在Android上测试。iOS是最新的。任何想法？

4

0 回答 0