当我尝试使用 angularjs 控制器推送数据时,我遇到了问题。但我所做的(IFormFile 文件)总是空的。只有一些使用 razor 语法的示例,但没有如何使用 Angular 或 jquery 执行此操作的示例。
HTML:
<form class="form-body" enctype="multipart/form-data" name="newFileForm" ng-submit="vm.addFile()"><input type="file" id="file1" name="file" multiple ng-files="getTheFiles($files)"/></form>
指令:
(function() {
'use strict';
angular
.module('app')
.directive('ngFiles', ['$parse', function ($parse) {
function fn_link(scope, element, attrs) {
var onChange = $parse(attrs.ngFiles);
element.on('change', function (event) {
onChange(scope, { $files: event.target.files });
});
};
return {
link: fn_link
};
}]);
})();
控制器
var formdata = new FormData();
$scope.getTheFiles = function ($files) {
angular.forEach($files, function (key, value) {
formdata.append(key, value);
});
};
vm.addFile = function () {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader("Content-Type", "undefined");
xhr.send(formdata);
}
Asp.net core webapi:
[HttpPost]
public async Task<IActionResult> PostProductProjectFile(IFormFile file)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
....
return ...;
}
我也尝试过使用 formdata 来完成此操作,因为它是在您使用 razor 语法发布时构建的。像这样的东西:
dataService.addFile(formdata, {
contentDisposition: "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"",
contentType: "multipart/form-data",
headers: {
"Content-Disposition": "form-data; name=\"files\"; filename=\"C:\\Users\\UserName\\Desktop\\snip_20160420091420.png\"",
'Content-Type': "image/png"
},
fileName: "C:\\Users\\UserName\\Desktop\\snip_20160420091420.png",
name: "files",
length : 3563
}
也代替 formData 来提供原始文件,正如我在评论中所写的。但还是什么也没发生
IFormFile 仅当您输入的名称与方法参数名称相同时才起作用。在您的情况下,输入名称是“files”,方法参数名称是“file”。让它们相同并且应该可以工作。
这是如何使用 angularjs 做到这一点:
vm.addFile = function () {
var fileUpload = $("#file").get(0);
var files = fileUpload.files;
var data = new FormData();
for (var i = 0; i < files.length ; i++) {
data.append(files[i].name, files[i]);
}
$http.post("/api/Files/", data, {
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
}).success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
}
在 Web Api 中:
[HttpPost]
public async Task<IActionResult> PostFile()
{
//Read all files from angularjs FormData post request
var files = Request.Form.Files;
var strigValue = Request.Form.Keys;
.....
}
或者像这样:
[HttpPost]
public async Task<IActionResult> PostFiles(IFormCollection collection)
{
var f = collection.Files;
foreach (var file in f)
{
//....
}
}
您也可以通过剑道上传来做到这一点,更简单:
$("#files").kendoUpload({
async: {
saveUrl: dataService.upload,
removeUrl: dataService.remove,
autoUpload: false
},
success: onSuccess,
files: files
});
来自@Tony Steele 的回答。 这是代码示例(在哪里更改/处理)
.NET Core 3.1 LTS
[Route("UploadAttachment")]
[HttpPost]
public async Task<IActionResult> UploadAttachment(List<IFormFile> formFiles)
{
return Ok(await _services.UploadAttachment(formFiles));
}
AngularJS
var formFiles = new FormData();
if ($scope.files != undefined) {
for (var i = 0; i < $scope.files.length; i++) {
formFiles.append('formFiles', $scope.files[i]);
}
}
if multiple file upload:
const formData = new FormData();
this.fileList.forEach((file: any) => {
formData.append('pictures', file['originFileObj']);
});
public async Task<IActionResult> Post(List<FromForm> pictures)
{
return Ok();
}
if single file upload:
const formData = new FormData();
this.fileList.forEach((file: any) => {
formData.append(file['name'], file['originFileObj']);
});