16
मैं एक एक्सप्रेस बैक एंड के खिलाफ एकल छवि अपलोड के लिए कोणीय में एनजी-प्रवाह का उपयोग करने की कोशिश कर रहा हूं। जब मैं अपलोड करने के लिए एक छवि का चयन करता हूं, तो ऐसा लगता है कि एनजी-प्रवाह मेरे लक्ष्य (/ व्यवस्थापक/अपलोड) को एक GET अनुरोध भेज रहा है, फिर कुछ भी नहीं। मुझे लगता है कि जीईटी टेस्ट चंक्स व्यवहार का हिस्सा है, लेकिन मैं अभी भी अस्पष्ट हूं कि मुझे ब्राउजर से पोस्ट क्यों नहीं दिख रहा है।एनजी-प्रवाह एक जीईटी जारी करने के लिए, लेकिन पोस्ट
यहां मेरे क्लाइंट का हिस्सा एनजी-प्रवाह से निपटने का हिस्सा है। यह एनजी प्रवाह में कोड नमूने पर भारी आधारित है।
<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);
});
}
क्या मुझे एनजी-प्रवाह के लिए मार्कअप में कुछ मौलिक याद आया है? या एक्सप्रेस में कुछ? या? पहले ही, आपका बहुत धन्यवाद।
दरअसल, मैं पहले ही परीक्षण-भाग = "झूठी" निर्दिष्ट कर रहा था। फिर भी सुझाव के लिए धन्यवाद। –
अच्छी तरह से आप test-chunks = false का उपयोग कर रहे हैं जो गलत है यह वास्तव में प्रवाह-init = "{target: url, testChunks: false}" – Yeak
वह था! उसके लिए बहुत अधिक धन्यवाद। –