angularjs - con - node js angular api
ng-flow emitiendo un GET, pero no un POST (2)
Experimenté el mismo problema después de haber usado ng-flow sin problema durante bastante tiempo.
Configurar testChunks en falso funciona, sin embargo, quería mantener la funcionalidad de testChunks para acelerar la reanudación de archivos.
Después de algunas excavaciones, descubrí que, por algún motivo, el código de error 404 estaba en la lista de errores permanentes en los archivos de distribución de flowjs (no recuerdo que estuvieran allí anteriormente). Acabo de modificar mi flow-init para excluir 404 y todo volvió a la normalidad.
flow-init="
{
target: ''/services/upload'',
query: injectUploadID,
permanentErrors: [415, 500, 501]
}"
Estoy tratando de usar ng-flow en angular para cargar una sola imagen contra un back-end Express. Cuando selecciono una imagen para cargar, parece que ng-flow está enviando una solicitud GET a mi objetivo (/ admin / upload), y luego nada más. Asumo que el GET es solo una parte del comportamiento de testChunks, pero todavía no tengo claro por qué no veo un POST desde el navegador.
Aquí está la parte de mi cliente que trata con ng-flow. Se basa en gran medida en los ejemplos de código en 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>
Aquí hay un extracto de mi archivo express.js. Notará que he definido una app.post y un método app.get para la URL de carga.
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);
});
}
¿Me he perdido algo fundamental en el marcado para ng-flow? o algo en expreso? ¿O? Gracias de antemano.
Tuve el mismo problema y la solución que encontré fue establecer testChunks: false
flow-init = "{target: url, testChunks: false}"