[英]Upload file asynchronously with Angular, ng-file-upload using a RESTful API
我有一個表單,其中一些表單字段是文件上傳。 這就是我所擁有的:
現在,這就是我想要做的:
¿如何以編程方式執行此文件上傳? (我使用的是角度承諾,因此順序請求沒有問題...)
這是我的代碼:
$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!
好的,所以我終於明白了。
我這樣做:
因此,這里的技巧是執行兩個請求,一個請求創建實體並檢索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的最佳方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.