如何使用ngFlow插件在不上传图片的情况下将图片添加到$flow.files

Question

这是我用于上传头像的HTML标记：

<div  style="padding: 10px;">
  <div class="text-center">
    <h4><kbd>Avatar Picture</kbd></h4>
  </div>
  <div class="thumbnail" ng-hide="obj.flow.files.length">
    <img src="Some url for none avatar picture."/>
  </div>
  <div class="thumbnail" ng-show="obj.flow.files.length">
    <img flow-img="obj.flow.files[0]"/>
  </div>
  <div class="text-center">
    <span class="btn btn-info" ng-hide="obj.flow.files.length" flow-btn
                              flow-attrs="{accept:'image/*'}">Select image</span>
    <span class="btn btn-info" ng-show="obj.flow.files.length" flow-btn
                              flow-attrs="{accept:'image/*'}">Change</span>
    <a href="#" class="btn btn-danger" ng-show="obj.flow.files.length"
       ng-click="obj.flow.cancel()">Remove</a>
  </div>
</div>

如果用户有头像，如何添加图像(无需发送请求)。我认为使用$scope.$flow.addFile()不是一个好主意。

我的意思是，如果用户有一个头像，obj.flow.files不应该是空的，因为需要显示他的头像。

Answer 1

如果您想要在文件添加时停止flow上传，请使用以下方法来防止此默认行为。您应该仍然可以访问obj.flow.files中的文件，但它只会被临时存储(不会上传到服务器)。

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
    event.preventDefault();
}

例如，要忽略大于特定文件大小的文件，我会执行此操作(否则，继续上传)。

$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {

    if(flowFile.size > 5000000) {
        $scope.errorText = "Error: File too large.";
        //prevent file from uploading
        event.preventDefault();
    } else {
        // Upload file.
        $flow.upload(); 
    }
});

希望我没弄错你的问题。