标签: flow-js

我试图在角度上使用ng-flow来针对Express后端上传单个图像.当我选择要上传的图像时,似乎ng-flow正在向我的目标发送GET请求(/ admin/upload),然后没有其他内容.我认为GET只是testChunks行为的一部分,但我仍然不清楚为什么我没有看到来自浏览器的POST.

这是我的客户处理ng-flow的部分.它主要基于ng-flow中的代码示例.

<div flow-init="{target: '/admin/upload'}" flow-prevent-drop
                     flow-drag-enter="style={border: '5px solid green'}"
                     flow-drag-leave="style={}"
                     test-chunks="false"
                     ng-style="style"
                     flow-files-submitted="$flow.upload()"
                     flow-file-success="$file.msg = $message">

                    <div class="container">
                        <h1>flow basic example</h1>
                        <hr class="soften"/>

                        <div class="row">

                            <div class="span6">
                                <h2>Buttons:</h2>

                                <span class="btn" flow-btn><i class="icon icon-file"></i>Upload File</span>

                            </div>
                        </div>
                        <hr class="soften">

                        <h2>Transfers:</h2>

                        <p>
                            <a class="btn btn-small btn-success" ng-click="$flow.resume()">Upload</a>
                            <a class="btn btn-small btn-danger" ng-click="$flow.pause()">Pause</a>
                            <a class="btn btn-small btn-info" ng-click="$flow.cancel()">Cancel</a>
                            <span class="label label-info">Size: {{$flow.getSize()}}</span>
                            <span class="label label-info">Is Uploading: {{$flow.isUploading()}}</span>
                        </p>
                        <table class="table table-hover table-bordered table-striped" flow-transfers>
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Size</th>
                                <th>Relative Path</th> …

我无法弄清楚如何将flow.js库与节点后端一起使用,并将我的代码基于flow.js github 上的示例.

我正在获取blob文件,但是在上传完成后我没有构建二进制文件.最后的获取没有被触发或我的路线错误:

  app.get('/download/:identifier', function(req, res){
    console.log('we writin')
    flow.write(req.params.identifier, res);
  });

任何人都有这方面的经验可能会像一百万stackoverflow pts,因为这似乎是使用node.js和flow.js时的常见问题,这里有两个其他未解决的问题:

Flowjs文件上传 - 在多部分上传中生成的AngularJS和节点重组文件块

首先,我使用ng-flow(angular.js框架上的html5文件上传扩展)

我的文件已上传,我在控制台中记录了该事件.但我不明白在哪里以及如何保存它们.

这是我的html代码,上传被调用.

<div flow-init flow-files-submitted="$flow.upload()">   
<div class="drop" flow-drop ng-class="dropClass">
    <span class="btn btn-default" flow-btn>Upload File</span>
    <span class="btn btn-default" flow-btn flow-directory ng-show="$flow.supportDirectory">Upload Folder</span>
    <b>OR</b>
    Drag And Drop your file here
</div>

这是我的配置

app.config(['flowFactoryProvider', function (flowFactoryProvider) {
  flowFactoryProvider.defaults = {
    target: 'upload.php',
    permanentErrors: [404, 500, 501],
    maxChunkRetries: 1,
    chunkRetryInterval: 5000,
    simultaneousUploads: 4,
    singleFile: true
  };
  flowFactoryProvider.on('catchAll', function (event) {
    console.log('catchAll', arguments);
  });
  // Can be used with different implementations of Flow.js
  // flowFactoryProvider.factory = fustyFlowFactory;
}]);

upload.php被称为,并$_GET充满了数据, …

我正在尝试https://github.com/flowjs/ng-flow为文件上传实现ng-flow .它以块的形式上传文件,我在客户端成功设置了这个,但我不知道如何在web api方法中的后端处理文件.

  public void Upload()
        {
            //how to handle file?
        }

该请求包含以下信息

使用flow.js组件,我们可以分配一个这样的浏览按钮:

flow.assignBrowse(document.getElementById('browseButton'));

我们可以像这样指定一个放置区域:

flow.assignDrop(document.getElementById('dropTarget'));

我们也可以取消分配这样的放置区域:

flow.unAssignDrop(document.getElementById('dropTarget'));

我的第一个问题是如何取消分配浏览按钮？

我的第二个问题是如何知道(原生)是否已经定义了浏览按钮？

我在文档中看不到任何相关信息.

谢谢.

flow`比任何东西都好.

我想使用ng-flowin 发送一个输入文本和文件Angular js

请帮帮我们......

我试图通过它的Angular包装器使用flow.js(https://github.com/flowjs/flow.js)(https://github.com/flowjs/ng-flow/tree/master/samples/basic)将文件上载到ASP.NET WebAPI 2服务器.无论如何,当我选择一个文件来上传我的WebAPI时,只获得第一个块GET请求,然后没有任何反应:没有POST完成,似乎flow.js没有启动上传.

选择文件时触发的初始GET是:

GET http://localhost:49330/api/upload?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=4751&flowTotalSize=4751&flowIdentifier=4751-ElmahMySqlsql&flowFilename=Elmah.MySql.sql&flowRelativePath=Elmah.MySql.sql&flowTotalChunks=1 HTTP/1.1
Host: localhost:49330
Connection: keep-alive
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Accept: */*
Referer: http://localhost:49330/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8,it;q=0.6

响应是:

HTTP/1.1 202 Accepted
Cache-Control: no-cache
Pragma: no-cache
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?QzpcUHJvamVjdHNcNDViXFRlc3RcVXBUZXN0XFVwVGVzdFxhcGlcdXBsb2Fk?=
X-Powered-By: ASP.NET
Date: Fri, 17 Apr 2015 08:02:56 GMT
Content-Length: 0

然后,不再发出请求.

由于似乎没有最新的WebAPI示例,但只有零散的帖子,我为像我这样的新手创建了一个虚拟的repro解决方案,可以从http://1drv.ms/1CSF5jq下载:它是一个ASP.NET WebAPI 2在添加相应的API控制器后,我将上传代码放在主视图中的解决方案.只需按F5并尝试上传文件即可.您可以在中找到API控制器UploadController.cs.

相关的代码部分是:

a)客户端:类似于ng-flow页面的快速启动示例的页面:

<div class="row">
    <div class="col-md-12"> …

我需要在ng-flow中使用单文件属性,我必须使用它,因为除了限制文件的nuber之外的这个属性,替换文件thate被添加到上传事件,请参阅:

singleFile Enable single file upload. Once one file is uploaded,
second file will overtake existing one, first one will be canceled. (Default: false)

这是从flow.js git存储库中获取的文档.
我真正需要做的是将此属性放在工厂中,因为我需要为我的所有输入文件字段设置此属性.我试着在ng-flow文档中搜索它,但它缺乏很多解释,有谁知道怎么做？否则任何人都知道在哪里找到这个模块的完整好的文档？

我正在使用ng-flow在我的AngularJS应用程序中上传文件.我能够通过ng-flow成功保存数据并上传多个文件.但是,在查询数据并通过JSON获取数据时,我不确定如何将文件添加到每行的ng-flow对象中.每个文件都是基于JSON字符串的64位编码.

为了澄清,我每个井都很好,每个井都有一个名称,位置,许可等,以及多个图像.除了图像之外,井中的所有属性都成功填充在DOM中.

HTML:

...
<div flow-init flow-name="well.flow">
    <span class="btn" flow-btn flow-attrs="{accept:'image/*'}">Upload File</span>

    <table>
        <tr ng-repeat="file in well.flow.files">
            <td>{{ $index+1 }}</td>
            <td>{{ file.name }}</td>
            <td>{{ file.msg }}</td>
            <td><span ng-click="file.cancel()"><i class="icon-remove"></i></span></td>
        </tr>
    </table>
</div>

在AngularJS控制器内:

wellsFactory.getData($scope.wellsParams).then(function(data){
        angular.forEach(data.wells, function(wells, wKey){

            if(wells.files){
                var list = [];
                angular.forEach(wells.files, function(files, fKey){

                    var binaryFile = atob(files.file);
                    var byteNumbers = new Array(binaryFile.length);
                    for (var i = 0; i < binaryFile.length; i++) {
                        byteNumbers[i] = binaryFile.charCodeAt(i);
                    }
                    var byteArray = new Uint8Array(byteNumbers);
                    var blob = new Blob([byteArray.buffer], …

我正在编写一个RESTful API,其中包含一些端点,客户端可以将这些端点PUT或POST分块文件(使用flow.js),包括元数据中的有效负载摘要.服务器还会计算摘要,如果摘要不匹配,则会抛出错误,在这种情况下,客户端应尝试重试相同的请求而不做任何更改(至少在达到某个重试限制之前).

根据定义,所有标准代码似乎都不合适.什么是最好的代码？是否有任何符合惯例？

注意:出于与此库集成的目的,响应不能是404,415,500或501,因为它们将取消较大的操作而不是重试此部分.

我也不能使用409,因为它被用于识别上传同一文件的多个副本的尝试,我相信这更好地使用409.