ng-flow che emette un GET, ma non un POST

Question

Sto provando a utilizzare il flusso ng in angolare per il caricamento di singole immagini su un back-end Express. Quando seleziono un'immagine da caricare, sembra che ng-flow stia inviando una richiesta GET al mio target (/ admin/upload), quindi nient'altro. Presumo che GET sia solo una parte del comportamento di testChunks, ma non sono ancora chiaro perché non vedo un POST dal browser.

Ecco la parte del mio cliente che si occupa di ng-flow. È basato pesantemente sugli esempi di codice in 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> 

Ecco un estratto dal mio file express.js. Noterai che ho definito un'app.post e un metodo app.get per l'URL di caricamento.

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); 
    }); 
    } 

Ho perso qualcosa di fondamentale nel markup per ng-flow? o qualcosa in Express? O? Grazie in anticipo.

Answer 1

Ho avuto lo stesso problema e la soluzione che ho trovato è stato quello di impostare testChunks: falsi

flow-init = "{bersaglio: url, testChunks: true}"

Answer 2

ho sperimentato lo stesso problema dopo aver usato ng-flow senza problemi per un bel po 'di tempo.

L'impostazione di testChunks su false funziona, tuttavia, volevo mantenere la funzionalità testChunks per accelerare la ripresa dei file.

Dopo alcuni scavi ho scoperto che per qualche motivo il codice di errore 404 era nella lista degli errori permanenti nei file di distribuzione del flusso (non ricordatevi di essere lì in precedenza). Ho appena modificato il mio flusso-init per escludere 404 e tutto è tornato alla normalità.

   flow-init=" 
       { 
        target: '/services/upload', 
        query: injectUploadID, 
        permanentErrors: [415, 500, 501] 
       }"