在AngularJS中使用multipart/form-data
上传多个图片,可以使用FormData
对象来创建一个表单数据,然后使用$http
服务来发送请求。
以下是一个示例代码:
HTML部分:
AngularJS部分:
app.controller('MyController', function($scope, $http) {
$scope.files = [];
$scope.upload = function() {
var formData = new FormData();
// 将每个文件添加到formData中
for (var i = 0; i < $scope.files.length; i++) {
formData.append('files', $scope.files[i]);
}
$http.post('/upload', formData, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).then(function(response) {
// 上传成功后的处理
console.log('上传成功');
}, function(error) {
// 上传失败后的处理
console.log('上传失败');
});
};
});
在上面的代码中,我们将$scope.files
绑定到的
ng-model
指令上,这样用户就可以选择多个文件。
在upload
函数中,我们创建了一个FormData
对象,并使用append
方法将每个文件添加到表单数据中。然后使用$http
服务的post
方法发送POST请求,将表单数据作为请求体发送。
需要注意的是,我们需要通过transformRequest: angular.identity
来告诉AngularJS不要对请求数据进行序列化处理,而是直接发送原始数据。并且在headers
中设置Content-Type
为undefined
,以便让浏览器自动设置正确的请求头。
在服务器端,你需要处理该请求并保存上传的文件。具体的实现会根据你使用的后端语言和框架而有所不同。