16
Tôi đang cố gắng sử dụng ng-flow trong góc cho tải lên hình ảnh duy nhất với một kết thúc trở lại Express. Khi tôi chọn một hình ảnh để tải lên, có vẻ như luồng ng đang gửi yêu cầu GET đến mục tiêu của tôi (/ admin/upload), sau đó không có gì khác. Tôi cho rằng GET chỉ là một phần của hành vi testChunks, nhưng tôi vẫn chưa rõ lý do tại sao tôi không thấy một POST từ trình duyệt.ng-dòng phát hành một GET, nhưng không phải là POST
Đây là phần khách hàng của tôi xử lý luồng ng. Nó dựa chủ yếu vào các mẫu mã trong 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>
Đây là trích xuất từ tệp express.js của tôi. Bạn sẽ nhận thấy tôi đã xác định app.post và phương thức app.get cho URL tải lên.
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);
});
}
Tôi đã bỏ lỡ điều gì đó cơ bản trong đánh dấu cho luồng ng? hoặc một cái gì đó trong Express? Hoặc là? Cảm ơn bạn trước.
Thực ra, tôi đã chỉ định test-chunks = "false". Nhờ đề nghị mặc dù. –
cũng bạn đang sử dụng thử nghiệm-khối = false đó là sai nó thực sự là flow-init = "{target: url, testChunks: false}" – Yeak
Đó là nó! Cảm ơn bạn rất nhiều vì điều đó. –