1

最近两天,我一直在尝试为我的网站创建一个图像上传系统。当我尝试将上传的图像保存在我的 Api 的“wwwroot”中时,一切都按计划进行,除了我在文件夹中得到一个空图像。

在后端,我收到了我在前端发送的文件名,但图像本身的字节不存在。由于某种原因,我在 post 调用中输入的流数据丢失了,但我确实在 formfile 中收到了文件名。

编辑

为了弄清楚我的应用程序,我使用 Asp.Net Mvc 作为前端,使用 Asp.Net Api 作为后端。我知道这不是您应该使用 Asp.Net 的方式,但这是一个学校项目,我必须这样做。通常我会使用 Angular 或其他东西,但现在这不是我的选择。

因此,我将数据从 Asp.Net Mvc(前端)发送到 Asp.Net Api(后端),并尝试通过将其作为表单数据发送来实现。这意味着没有提交的真实表格。

这是我尝试使用的指南: https ://ilclubdellesei.blog/2018/02/14/how-to-upload-images-to-an-asp-net-core-rest-service-with-xamarin-forms /

后端

图像控制器:

[HttpPost("upload")]
public async Task<IActionResult> UploadImage([FromForm(Name = "file")] IFormFile file)
{
    if (file.Length == 0)
        return BadRequest("Empty file");

    string imageName = file.FileName;
    using (var fs = new FileStream("wwwroot/" + imageName, FileMode.Create, FileAccess.Write))
    {
        await file.CopyToAsync(fs);
    }

    return Ok();
}

前端

将 1 张图像作为 MemoryStream 上传到服务器的方法

private async Task<string> Upload(Stream image, string name, string contentType)
{
    _httpClient = _clientFactory.CreateClient("ProjectApi");

    HttpContent fileStreamContent = new StreamContent(image);
    fileStreamContent.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") { Name = "file", FileName = name };
    fileStreamContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(contentType);
    using (var formData = new MultipartFormDataContent())
    {
        formData.Add(fileStreamContent);
        HttpResponseMessage response = await _httpClient.PostAsync("api/images/upload", formData);
        var input = await response.Content.ReadAsStringAsync();
        return input;
    }
}

内容似乎不是空的:

在此处输入图像描述

文件名已成功发送到 Api,但图像的字节尚未发送:

在此处输入图像描述

上传一些图像而不检查表单文件的大小后的结构(它们是空的):

上传图片后的结构

4

1 回答 1

1

我不是 100% 肯定,但我想你得到空文件的原因是你没有设置你的 api 端点将使用什么类型的数据,也许是表单加密类型和方法属性。我的建议是你应该将你的代码更新到下面。,

[Consumes("multipart/form-data")]
private async Task<string> Upload(Stream image, string name, string contentType)

如果您忘记将表单属性添加到您的 html 部分,请按如下方式设置属性<form method="post" enctype="multipart/form-data">。希望这能解决您的问题。

于 2018-12-26T11:35:18.923 回答