Angular:如何听取自己没有做出的回应?
Angular: how to listen for response that you yourself don't make?
在Angular中,有没有一种方法可以监听对您自己未发出的请求的响应?具体来说,我正在实现文件上传到 Node.js,并且我正在以编程方式提交表单:
HTML:
<form enctype = "multipart/form-data"
action = "/blah/fileupload"
method = "post"
id = "upload_file"
>
<input type="file" onchange="angular.element(this).scope().onFileSelect(event)" name="bulk_uploads" />
</form>
Angular 控制器:
$scope.onFileSelect = function(event)
{
var form_elem = document.getElementById('upload_file');
form_elem.submit();
}
问题是以这种方式提交表单没有 return 承诺,如果我这样提交表单:
$http.post('/blah/fileupload', { files : event.target.files })
然后上传的文件一旦到达节点服务器就无法访问(例如 req.files 为空)。
有没有一种方法可以像我目前所做的那样通过编程方式提交表单来监听服务器对 'blah/fileupload' 的响应,或者我这样做的方式有误?
注意:为了性能,我不希望使用 Interceptors API。如果性能没有受到重大影响,请务必告诉我!
主要有两个建议:
1) 使用一些外部 angular 文件上传库,例如 ng-file-upload
2) 从控制器订阅 submit
事件:
document.getElementById('upload_file').addEventListener('submit', your_handler)
虽然这不是我的特定 'how do I create an Angular-side service endpoint?' 问题的答案,但我能够通过在将数据发布到服务器之前读取客户端中的文件内容来解决我遇到的问题:
var fileInput = document.getElementById('upload_file');
fileInput.addEventListener('change', onFileSelect);
function onFileSelect(event)
{
var fileList = event.target.files;
for (var i = 0, totalFiles = fileList.length; i < totalFiles; ++i)
{
var file = fileList.item(i);
var fileReader = new FileReader();
fileReader.addEventListener('load', onFileLoad);
fileReader.readAsText(file);
}
var fileData = new Array();
function onFileLoad(event)
{
fileData.push(event.target.result);
if (fileData.length == totalFiles)
{
sendFilesToServer(fileData);
}
}
function sendFilesToServer(fileData)
{
$http.post('/blah/fileupload', { files : fileData })
.success(function(data, status, headers, config)
{
// ...
在Angular中,有没有一种方法可以监听对您自己未发出的请求的响应?具体来说,我正在实现文件上传到 Node.js,并且我正在以编程方式提交表单:
HTML:
<form enctype = "multipart/form-data"
action = "/blah/fileupload"
method = "post"
id = "upload_file"
>
<input type="file" onchange="angular.element(this).scope().onFileSelect(event)" name="bulk_uploads" />
</form>
Angular 控制器:
$scope.onFileSelect = function(event)
{
var form_elem = document.getElementById('upload_file');
form_elem.submit();
}
问题是以这种方式提交表单没有 return 承诺,如果我这样提交表单:
$http.post('/blah/fileupload', { files : event.target.files })
然后上传的文件一旦到达节点服务器就无法访问(例如 req.files 为空)。
有没有一种方法可以像我目前所做的那样通过编程方式提交表单来监听服务器对 'blah/fileupload' 的响应,或者我这样做的方式有误?
注意:为了性能,我不希望使用 Interceptors API。如果性能没有受到重大影响,请务必告诉我!
主要有两个建议:
1) 使用一些外部 angular 文件上传库,例如 ng-file-upload
2) 从控制器订阅 submit
事件:
document.getElementById('upload_file').addEventListener('submit', your_handler)
虽然这不是我的特定 'how do I create an Angular-side service endpoint?' 问题的答案,但我能够通过在将数据发布到服务器之前读取客户端中的文件内容来解决我遇到的问题:
var fileInput = document.getElementById('upload_file');
fileInput.addEventListener('change', onFileSelect);
function onFileSelect(event)
{
var fileList = event.target.files;
for (var i = 0, totalFiles = fileList.length; i < totalFiles; ++i)
{
var file = fileList.item(i);
var fileReader = new FileReader();
fileReader.addEventListener('load', onFileLoad);
fileReader.readAsText(file);
}
var fileData = new Array();
function onFileLoad(event)
{
fileData.push(event.target.result);
if (fileData.length == totalFiles)
{
sendFilesToServer(fileData);
}
}
function sendFilesToServer(fileData)
{
$http.post('/blah/fileupload', { files : fileData })
.success(function(data, status, headers, config)
{
// ...