Question

好的，奇怪的错误。此代码适用于IOS 10及之前的浏览器和Safari。

我有一个页面，我们正在构建要提交给我们数据库的项目，此项目由多个订单项组成，每个订单项都有图像数组存储图像。当文件上传时（使用ng-file-upload），我们分析文件以确保它匹配某些大小和类型限制，然后将其填入数组中，此时页面上有另一个控件给用户项目的图像预览以及如果他们不想再上传图片则删除图像的按钮。

HTML：

<div ng-repeat="item in items">
  <div class="row">
    <div class="col-xs-12 col-md-2">
      <div class="form-group">
        <div class="btn btn-default" ngf-select ngf-change="UploadFile(item, $file)" ngf-multiple="false">Upload Image</div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <ul class="thumbnail-list">
        <li class="image-thumbnail" ng-repeat="image in item.images">
          <span ng-click='removeImage(image, item, $index)' class='remove'>X</span>
          <img ngf-src="image.file" ngf-no-object-url="true" ngf-accept="'image/*'">
        </li>
      </ul>
    </div>
  </div>
</div>

JS控制器代码：

$scope.fileReader = new FileReader();
$scope.fileReader.onload = function () {
  $scope.CurrentItem.images[$scope.CurrentItem.images.length - 1].base64 = this.result;          
  $scope.selectedImage.base64 = this.result;
};

$scope.UploadFile = function (item, file) {
  if (file != null && file != "") {
    $scope.error = '';
    $scope.CurrentItem = item;

    // Validation Logic here removed
    if (valid) {
      $scope.selectedImage = {};
      $scope.selectedImage = {
        'size': file.size,
        'type': file.type,
        'name': file.name,
        'file': file
      };
      $scope.CurrentItem.images.push($scope.selectedImage);
      $scope.fileReader.readAsDataURL(file);

    } else {
      // Handle Validation Failure
    }
  }
}

在IOS 11上，图像成功添加到数组中，图像的元素添加到页面中，删除操作的红色X正确定位在其上。但是，不会显示实际的图像预览。但是，如果您将iPad的方向从纵向更改为横向，反之亦然，则可能会在方向更改时调用一些刷新并填充图像预览。

在IOS 10及更低版本以及桌面浏览器（包括OSX上的Safari 11）上，这只会在元素按预期添加到页面的同时呈现图像。

有人有什么想法吗？

无法在IOS 11 Safari上加载上传图片预览，Angular 1.5.8

0 个答案: