首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >ng-flow发出GET,但不是POST

ng-flow发出GET,但不是POST
EN

Stack Overflow用户
提问于 2014-07-26 14:22:47
回答 2查看 9.9K关注 0票数 16

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

下面是我的客户端处理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>
                                <th>Unique Identifier</th>
                                <th>#Chunks</th>
                                <th>Progress</th>
                                <th>Paused</th>
                                <th>Uploading</th>
                                <th>Completed</th>
                                <th>Settings</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="file in transfers">
                                <td>{{$index+1}}</td>
                                <td>{{file.name}}</td>
                                <td>{{file.size}}</td>
                                <td>{{file.relativePath}}</td>
                                <td>{{file.uniqueIdentifier}}</td>
                                <td>{{file.chunks.length}}</td>
                                <td>{{file.progress()}}</td>
                                <td>{{file.paused}}</td>
                                <td>{{file.isUploading()}}</td>
                                <td>{{file.isComplete()}}</td>
                                <td>
                                    <div class="btn-group">
                                        <a class="btn btn-mini btn-warning" ng-click="file.pause()" ng-hide="file.paused">
                                            Pause
                                        </a>
                                        <a class="btn btn-mini btn-warning" ng-click="file.resume()" ng-show="file.paused">
                                            Resume
                                        </a>
                                        <a class="btn btn-mini btn-danger" ng-click="file.cancel()">
                                            Cancel
                                        </a>
                                        <a class="btn btn-mini btn-info" ng-click="file.retry()" ng-show="file.error">
                                            Retry
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                        <hr class="soften"/>

                        <div class="alert" flow-drop flow-drag-enter="class='alert-success'" flow-drag-leave="class=''"
                             ng-class="class">
                            Drag And Drop your file here
                        </div>
                    </div>
                    </div>
            </div>


        </div>

下面是我的express.js文件的摘录。您会注意到,我已经为上传URL定义了一个app.post和一个app.get方法。

var express = require('express'),
favicon = require('static-favicon'),
morgan = require('morgan'),
compression = require('compression'),
bodyParser = require('body-parser'),
methodOverride = require('method-override'),
cookieParser = require('cookie-parser'),
session = require('express-session'),
errorHandler = require('errorhandler'),
path = require('path'),
config = require('./config'),
passport = require('passport'),
mongoStore = require('connect-mongo')(session);

var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

process.env.TMPDIR = 'tmp';
var flow = require('../../flow-node.js')('tmp');

/**
* Express configuration
*/
module.exports = function(app) {
var env = app.get('env');

if ('development' === env) {
app.use(require('connect-livereload')());

// Disable caching of scripts for easier testing
app.use(function noCache(req, res, next) {
  if (req.url.indexOf('/scripts/') === 0) {
    res.header('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.header('Pragma', 'no-cache');
    res.header('Expires', 0);
  }
    if(path.extname(req.url) == '.js'){
        res.set('Content-Type','text/javascript');

    }
 }
  next();
});

app.use(express.static(path.join(config.root, '.tmp')));
app.use(express.static(path.join(config.root, 'app')));
app.set('views', config.root + '/app/views');
  app.set('scripts', config.root + '/app/scripts');
  app.set('bower_components', config.root + '/app/bower_components');

  app.post('/admin/upload', multipartMiddleware, function(req, res) {
      console.log('in POST...');

      flow.post(req, function(status, filename, original_filename, identifier) {
          console.log('POST', status, original_filename, identifier);
          res.send(200, {
              // NOTE: Uncomment this funciton to enable cross-domain request.
              'Access-Control-Allow-Origin': '*'
          });
      });
  });

  app.get('/admin/upload', function(req, res) {
      flow.get(req, function(status, filename, original_filename, identifier) {
          console.log('GET', status);
          res.send(200, (status == 'found' ? 200 : 404));
      });
  });

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

我是否在ng-flow的标记中遗漏了一些基本的东西?或者是Express中的一些东西?或?提前谢谢你。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-08-02 07:37:55

我遇到了同样的问题,我找到的解决方案是将testChunks:false

flow-init="{target: url,testChunks:false}“

票数 31
EN

Stack Overflow用户

发布于 2014-12-26 12:26:16

在使用ng-flow很长一段时间都没有问题之后,我遇到了同样的问题。

将testChunks设置为false确实有效,但是我希望保留testChunks功能以加快文件恢复速度。

经过一些挖掘,我发现由于某种原因,404错误代码在flowjs分发文件的永久错误列表中(不记得它以前就在那里)。我刚刚修改了我的flow-init,排除了404,一切都恢复正常了。

              flow-init="
                {
                  target: '/services/upload', 
                  query: injectUploadID,
                  permanentErrors: [415, 500, 501]
                }"
票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24968194

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档