6

我尝试使用 ng-flow 模块使用 angularjs 和 bootstrap 实现个人资料图片上传。在 safari 中它工作正常，但在 chrome 中，请求将不起作用。它向我显示“警告：请求尚未完成”

这是一个屏幕截图：

我试图禁用所有 chrome 扩展等，但它仍然无法正常工作。我注意到的另一件事（我不知道它是否与我最初的问题有关）是按钮的奇怪错位边框，它似乎也只出现在 chrome 中。

在此处输入图像描述

我认为的代码：

<div class="row">
    <div class="col-md-12">
        <h2 style="text-align: center">edit your profile</h2>
    </div>

    <div ng-controller="uploadCtrl" flow-init="{singleFile:true}" flow-name="uploader.flow" flow-files-added="processFiles($files)">
        <div class="form-group">
        <button flow-btn class="btn btn-primary btn-sm" flow-attrs="{accept:'image/*'}">Upload Profile Picture</button>
        </div>
        <div class="thumbnail" ng-show="$flow.files.length">
            <img class="preview" flow-img="$flow.files[0]"/> 
        </div> 
        <button class="btn btn-primary btn-sm" ng-show="$flow.files.length" ng-click="save()">save</button>     
    </div>
</div>

控制器：

angular.module("myController").controller('uploadCtrl', function($scope, profileService) {


    $scope.imageStrings = [];

    $scope.processFiles = function(files){
        angular.forEach(files, function(flowFile, i){
           var fileReader = new FileReader();
              fileReader.onload = function (event) {
                var uri = event.target.result;
                  $scope.imageStrings[i] = uri;     
              };
              fileReader.readAsDataURL(flowFile.file);
        });
      };

     $scope.save = function(){

         var image = $scope.imageStrings[$scope.imageStrings.length -1];

         console.log(image)

         profileService.postProfilePicture.postProfilePicture(JSON.stringify(image),function(res) {
            console.log("success"); 

        }, function(error) {
            $scope.error = true;
        });
     };

});

编辑：

我认为它与文件大小有关。在 chrome 中，如果图像格式非常小（< 0.5mb 或 smth。像那样，没什么大不了的），所有图像格式都可以工作。

4

0 回答 0