一、
使用FormData异步提交
常用的表单提交编码方式有两种:multipart/form-data 和 application/x-www-form-urlencoded,如果是html页面中的form表单上传,可以使用enctype来指定编码方式,不指定时默认是后者。
文件上传必须使用multipart/form-data编码方式的表单post提交,而如果需要异步上传文件,则要使用FormData对象,如下:
$http({
method: 'POST',
url: '/myapp/api',
headers: {
'Content-Type': undefined //这里很重要,需要取消post默认的Content-Type,否则后台接收不到!
},
//angular提供的配置选项。在这里将data数据转换、包装成FormData格式
transformRequest: function(data) {
var formData = new FormData();
formData.append('id', data.id);
formData.append('type', data.type);
return formData;
},
//也可以在外面创建FormData对象,直接给data指定为该对象
data: {
id: $scope.userId,
type: $scope.infoType
}
}).then((res)=>{}, (err)=>{});
二、
angular-file-upload上传文件
这个插件在比较大的项目中用起来会很方便,比如文件树中文件的上传。
当把angularFileUploader作为依赖注入后,可以创建FileUploader对象:
$scope.material = {};
var materialUploader = $scope.material.uploader = new FileUploader({
url: fileManageService.uploadFile(), //需要上传到的url地址
formData: [{}],
autoUpload: true,
removeAfterUpload: true,
withCredentials: true,
});
// CALLBACKS
materialUploader.onAfterAddingFile = function (fileItem) {
$scope.material.isUploaded = true;
};
materialUploader.onSuccessItem = function (fileItem, response, status, headers) {
// 把结果追加到材料列表
if (response && response.data) {
$scope.material.children.push(response.data[0]);
$scope.material.totalItems = $scope.material.children.length;
} else {
// $dialog.alert({
// 'msg': '上传材料出错',
// 'title': '出错了'
// });
}
};
materialUploader.onErrorItem = function (fileItem, response, status, headers) {
//提示错误
// console.info('onErrorItem', fileItem, response, status, headers);
};
materialUploader.onCompleteAll = function () {
//完成,做后续操作
$scope.material.isUploaded = false;
// init();
};
同时需要给html页面中的文件input标签添加属性:
<input nv-file-select="" uploader="material.uploader" type="file" >
———————————————————————————————————————————————
原文链接:https://blog.csdn.net/longyin0528/article/details/81567529
详请请看官方文档 https://www.npmjs.com/package/angular-file-upload。