我有一个表单,其中一些表单字段是文件上传。这就是我所拥有的:
- 用户填写表格
- 用户选择要提交的文件
- 用户按下提交
现在,这就是我想做的:
- 将表单发布到服务器,获取 ID
- 将文件一发布到服务器 myresource/ID/fileone
- 将文件二发布到服务器 myresource/ID/filetwo ...
如何以编程方式执行此文件上传? (我使用的是 Angular promise ,因此顺序请求没有问题......)
这是我的代码:
$scope.upload = function (files, url) {
if (files && files.length) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
Upload.upload({
url: url,
//fields: {'username': $scope.username},
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
}).success(function (data, status, headers, config) {
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
});
}
}
};
我的html:
<input type="file" class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple"> Doit!
<input class="btn btn-danger" ng-file-select ng-model="files" ng-multiple="multiple">Doit too!
最佳答案
好吧,我终于明白了。
我这样做了:
- 选择文件并将文件存储在 ng-model 中
- 验证一些内容
- 提交主模型(拥有我要上传的文件的模型)
- 将文件上传到端点/api/myentity/{id}/resumee、/api/myentity/{id}/dni 和/api/myentity/{id}/picture。其中 {id} 是我在上一步中刚刚创建的实体的 ID。
所以这里的技巧是执行两个请求,一个是创建实体并检索 ID,第二个是上传文件。
代码如下所示:
// This is called every time the user selects a file
$scope.selectedFile = function (files, doc) {
if (doc === 'resumee') $scope.documents.resumee = files.pop();
else if (doc === 'dni') $scope.documents.dni = files.pop();
else if (doc === 'picture') $scope.documents.picture = files.pop();
};
// This is called when the user submits the form
$scope.upload = function (docname, url) {
var file = $scope.stepThree.documents[docname];
return Upload.upload({
url: url,
method: 'POST',
headers: {'Content-Type': file.type},
fileFormDataName: docname,
data: file,
file: file
}).progress(function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
});
};
最后,标记是这样的:
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-2">
<label> Resumen Curricular </label>
</div>
<div class="col-sm-2">
<button class="btn btn-danger" ngf-select ngf-change="selectFile($files, 'resumee')"> Seleccione</button>
<p>{{stepThree.documents.resumee.name}}</p>
</div>
</div>
</div>
由于没有人对这种方法/技术发表评论,因此我将其视为世界上使用文件上传、Angular 和 REST API 的最佳方式。
关于javascript - 使用 RESTful API 通过 Angular、ng-file-upload 异步上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30039368/