角度 2 的剑道 UI 上传组件 - 无法上传

Question

I am kendo ui for angular 2 and web api(.net core(.我无法使用剑道上传将文件上传到网络 api。

这是我的示例代码：目录：

<kendo-upload [saveUrl]="uploadSaveUrl"
[removeUrl]="uploadRemoveUrl"
(upload)="uploadEventHandler($event)">
</kendo-upload>

上传事件处理程序

uploadEventHandler(e: UploadEvent) 
{
this.fs.uploadFile(e.files).subscribe(result => { console.log('result', result); });
}

上传服务：

uploadFile(file: any) 
{
const baseUrl = this.basePath + '/api/Common/UploadFile';
return this.dah.post(baseUrl, file);
}

网页接口：

[HttpPost("UploadFile")]
public string UploadFile(IList<IFormFile> files)
{
return "";
}

在这里，我无法在 api 中获取文件列表。是否有任何工作代码？

Answer 1

<kendo-upload #myUpload="kendoUpload" [autoUpload]="false" [saveUrl]="'/api/Attachment/PostFormData'"  (upload)="uploadEventHandler($event)"> </kendo-upload>

组件.ts

ploadEventHandler(e: UploadEvent) {
console.log(e.files[0].uid);
// you can send extra data here
e.data = {
attachmentType: this.typList.filter(x=>x.Uid == e.files[0].uid)[0].type
};
}

网页 API 控制器

[HttpPost]
public async Task<HttpResponseMessage> PostFormData()
{
// Check if the request contains multipart/form-data.
if (!Request.Content.IsMimeMultipartContent())
{
throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
}
string _property = System.Web.HttpContext.Current.Request.Form["attachmentType"];
string root = HttpContext.Current.Server.MapPath("~/App_Data/uploads");
var provider = new MultipartFormDataStreamProvider(root);
try
{
// Read the form data.
await Request.Content.ReadAsMultipartAsync(provider);
int i = 0;
// This illustrates how to get the file names.
foreach (MultipartFileData fileData in provider.FileData)
{
if (string.IsNullOrEmpty(fileData.Headers.ContentDisposition.FileName))
{
return Request.CreateResponse(HttpStatusCode.NotAcceptable, "This request is not properly formatted");
}
string fileName = fileData.Headers.ContentDisposition.FileName;
if (fileName.StartsWith(""") && fileName.EndsWith("""))
{
fileName = fileName.Trim('"');
}
if (fileName.Contains(@"/") || fileName.Contains(@""))
{
fileName = Path.GetFileName(fileName);
}
var ext = Path.GetExtension(fileName);
var uniqFileName = $@"{Guid.NewGuid() + "." + ext }";
File.Move(fileData.LocalFileName, Path.Combine(root, uniqFileName));
i++;
}
return Request.CreateResponse(HttpStatusCode.OK);
}
catch (System.Exception e)
{
return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
}
}

Answer 2

你没有说'this.dah'是什么，但是当使用kendo-upload'uploadFiles(('方法时，你可以通过web-api服务中的[FromForm]属性访问你的文件：

[HttpPost("UploadFile")]
public string UploadFile([FromForm]ICollection<IFormFile> files)
{
return "";
}