如何将文件上传到 Web API 服务器并将参数发送到操作
本文关键字:参数 操作 服务器 Web 文件 API | 更新日期: 2023-09-27 18:37:08
美好的一天!
我正在做一个 ASP.NET 的Web API 2项目。在某个时候,需要上传一些文件。这些文件需要链接到某个FileModel(我们自己的类)。因此,客户端需要将 IEnumerable 作为参数发送,并将文件作为内容发送。因为它是一个 RESTful API,所以两者都必须在同一请求中发送。
我们能想到的最好的是以下控制器操作:
public async Task<HttpResponseMessage> Add([FromUri] IEnumerable<FileModel> fileModels)
{
// REQUEST INTEGRITY TESTING
var streamProvider = new CustomMultipartFormDataStreamProvider(fileSavePath, fileModels);
// Read the MIME multipart content using the stream provider we just created.
var work = await Request.Content.ReadAsMultipartAsync(streamProvider).ContinueWith(async t =>
{
// SOME WORK DONE AFTER SAVING THE FILES TO THE HARD DRIVE
}
}
问题如下:文件是使用"多部分/表单数据"内容类型标头上传的。在服务器端操作文件之前,我们需要知道 FileModel 的内容。如果我们使用MultipartFormDataStreamProvider,我们只能在文件已经保存到硬盘驱动器后访问非文件参数。
我们能找到的唯一解决方法是在URL中发送IEnumerable
问题是:有没有办法在访问文件之前同时提交 IEnumerable
我们目前用于文件上传的 jQuery 看起来像这样(出于早期测试目的,它只支持一个文件上传):
$('#Upload').click(function(e) {
e.preventDefault();
var headers = new Array();
headers["SessionId"] = sessionId;
var files = $('#fileInput').get(0).files;
var formData = new FormData();
formData.append("files", files[0]);
var fileModel = $('#fileSubmission').serialize();
$.ajax({
url: "api/Submissions/Add/?" + fileModel,
headers: headers,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: 'json'
});
});
谢谢!
抱歉答案晚了,但我们解决了问题(我忘了我没有在这里上传答案)。基本上,我们所做的是在临时位置调用 ReadAsMultiPartAsync 方法,然后从请求中提取其他参数。之后,我们验证了输入并将文件从临时位置移动到永久位置。
如果你想看代码,这就是对我们特定示例有效的代码,我相信适应任何工作案例场景都非常简单:
在客户端,我们有以下形式(是的,此实现用于演示目的,仅支持发送一个文件......此外,输入类型="文件"字段确实在表单之外;在我们的例子中,fileId 文本输入是手动完成的,仅用于测试目的)
<input type="file" name="data" id="fileInput" multiple="multiple" />
<form id="fileSubmission">
<input type="text" width="10" onchange="getFileDetails()" autocomplete="off" placeholder="FileId" name="files[0].Id" id="fileId" />
<input type="hidden" name="files[0].FileName" id="FileName"/>
<input type="hidden" name="files[0].Extension" id="Extension"/>
<input type="hidden" name="files[0].EntityId" id="EntityId"/>
<br /><br />
<input type="submit" id="Upload" value="Upload" />
</form>
其中 getFileDetails() 填充其他输入字段。此外,表单使用以下jQuery/Javascript发送到服务器:
$('#Upload').click(function(e) {
e.preventDefault();
var courseId = $('#courseId').val();
var fileId = $('#fileId').val();
if (!courseId || !fileId) {
return;
}
var headers = new Array();
headers["SessionId"] = sessionId;
headers["contentType"] = "application/json; charset=UTF-8";
var formData = new FormData();
var opmlFile = $('#fileInput').get(0).files;
// this is like the model we're expecting on the server
var files = [];
files.push({ 'Id': $('#fileId').val(), 'OriginalFileName': opmlFile[0].name, 'FileName': $('#FileName').val(), 'Extension': $('#Extension').val(), 'EntityId': $('#EntityId').val() });
formData.append("fileModels", JSON.stringify(files));
formData.append("File_0", opmlFile[0]);
$.ajax({
url: "api/Courses/" + courseId + "/Submissions/Add/",
headers: headers,
type: 'POST',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: 'json'
});
});
在服务器端,我们有以下内容:
// POST: api/Courses/{courseId}/Submissions/Add
[HttpPost]
[ValidateModelState]
[ValidateMimeMultipartContent]
[PermissionsAuthorize(CoursePermissions.CanCreateSubmissions)]
public async Task<HttpResponseMessage> Add(int courseId)
{
// the same as in the jQuery part
const string paramName = "fileModels";
// Put the files in a temporary location
// this way we call ReadAsMultiPartAsync and we get access to the other data submitted
var tempPath = HttpContext.Current.Server.MapPath("~/App_Data/Temp/" + Guid.NewGuid());
Directory.CreateDirectory(tempPath);
var streamProvider = new MultipartFormDataStreamProvider(tempPath);
var readResult = await Request.Content.ReadAsMultipartAsync(streamProvider);
if (readResult.FormData[paramName] == null)
{
// We don't have the FileModels ... delete the TempFiles and return BadRequest
Directory.Delete(tempPath, true);
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
// The files have been successfully saved in a TempLocation and the FileModels are not null
// Validate that everything else is fine with this command
var fileModels = JsonConvert.DeserializeObject<IEnumerable<FileModelExtension>>(readResult.FormData[paramName]).ToList();
// AT THIS POINT, ON THE SERVER, WE HAVE ALL THE FILE MODELS
// AND ALL THE FILES ARE SAVED IN A TEMPORARY LOCATION
// NEXT STEPS ARE VALIDATION OF THE INPUT AND THEN
// MOVING THE FILE FROM THE TEMP TO THE PERMANENT LOCATION
// YOU CAN ACCESS THE INFO ABOUT THE FILES LIKE THIS:
foreach (var tempFile in readResult.FileData)
{
var originalFileName = tempFile.Headers.ContentDisposition.FileName.Replace("'"", string.Empty);
var localTempPath = tempFile.LocalFileName;
}
}
我希望这将帮助任何尝试使用 Post 请求一次向服务器提交文件和其他参数的人! :)
注意:服务器上使用的某些属性是自定义的。PermissionAuthorize,ValidateModelState和ValidateMimeMultiPartContent是我们使用的自定义过滤器。后两者的实施受到 http://benfoster.io/blog/automatic-modelstate-validation-in-aspnet-mvc
multipartcontent 属性只是对 actionContext.Request.Content.IsMimeMultipartContent() 进行检查,如下所示:
public class ValidateMimeMultipartContent : ActionFilterAttribute
{
public override void OnActionExecuting(HttpActionContext actionContext)
{
if (!actionContext.Request.Content.IsMimeMultipartContent())
{
actionContext.Response = actionContext.Request.CreateErrorResponse(HttpStatusCode.UnsupportedMediaType, Messages.UnsupportedMediaType);
}
}
}