Xamarin.Forms使用数据上传多个图像

Question

我发现了一些有关如何在Xamarin中上传一个或多个图像的教程。但是，我还没有找到如何发送多幅图像，而每幅图像都包含一些卫星数据。

这是服务器上模型的外观：

public class AppFileDTO
{
    public IFormFile File { get; set; }
    public string CategoryName { get; set; }
    public string CategoryDescription { get; set; }
    public string Detail { get; set; }
}

但是控制器需要数据列表。这是Asp.Net Web Api端点：

 [HttpPost("UploadAppFiles/{id}")]
 public async Task<IActionResult> UploadAppFiles(int id, IEnumerable<AppFileDTO> appFileDTOs)
 {
     ...
 }

如何上传类似内容？

我发现有关如何上传带有卫星数据的单个图像的堆栈溢出内容

MultipartFormDataContent multiContent = new MultipartFormDataContent();

// Image 1
HttpContent fileStreamContent = new StreamContent(vm[0].File);
fileStreamContent.Headers.ContentDisposition = new 
System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
    Name = "File", 
    FileName = vm[0].File.FileName 
};
fileStreamContent.Headers.ContentType = new 
System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent );

// Satellite data, image 1
multiContent.Add(new StringContent(vm[0].CategoryName), "CategoryName");
multiContent.Add(new StringContent(vm[0].CategoryDescription), "CategoryDescription");
multiContent.Add(new StringContent(vm[0].Detail), "Detail");

// Send
var response = await client.PostAsync(url, multiContent);

您如何上传多个？

这是我出于测试目的在Postman上上传图像的方式，效果很好：

Answer 1

我认为您可以使用MultipartFormDataContent添加多个图像，并使用ContentDispositionHeaderValue.Parameters添加数据的值。

例如：

using (var content = new MultipartFormDataContent())
{
  content.Add(CreateFileContent(vm[0]);
  content.Add(CreateFileContent(vm[1]);

  var response = await client.PostAsync(url, content);
  response.EnsureSuccessStatusCode();
}


private StreamContent CreateFileContent(AppFileDTO appFileDTO)
{
  var fileContent = new StreamContent(appFileDTO.File.Stream);//your file stream
  fileContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data")
     {
        Name = "\"files\"",
        FileName = "\"" + appFileDTO.File.FileName + "\"",           
     }; // the extra quotes are key here
  fileContent.Headers.ContentType = new MediaTypeHeaderValue("image/jpeg");  
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("CategoryName",appFileDTO.CategoryName));      
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("CategoryDescription", appFileDTO.CategoryDescription));   
  fileContent.Headers.ContentDisposition.Parameters.Add(new NameValueHeaderValue("Detail", appFileDTO.Detail));   
  return fileContent;
}

并获取https://stackoverflow.com/a/30193961/10768653的Content-Disposition参数

Answer 2

我最终这样做是这样的：

MultipartFormDataContent multiContent = new MultipartFormDataContent();

// appFileDTOs[] contains the data that I am going to submit (image and satellite data)
// ------------------------ Object 1 -----------------------------------

// Image 1
HttpContent fileStreamContent1 = new StreamContent(image);
fileStreamContent1.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
     Name = "appFileDTOs[0].File", 
     FileName = "YourFileName.something" // e.g. image1.jpg
};
fileStreamContent1.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent1);

// Additional data for image 1
multiContent.Add(new StringContent(appFileDTOs[0].CategoryName), "appFileDTOs[0].CategoryName");
multiContent.Add(new StringContent(appFileDTOs[0].CategoryDescription), "appFileDTOs[0].CategoryDescription");
multiContent.Add(new StringContent(appFileDTOs[0].Detail), "appFileDTOs[0].Detail");

// ------------------------ Object 2 -----------------------------------

// Image 2
HttpContent fileStreamContent2 = new StreamContent(image);
fileStreamContent2.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("form-data") 
{
     Name = "appFileDTOs[1].File", 
     FileName =  "YourFileName.something" // e.g. image2.jpg
};
fileStreamContent2.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
multiContent.Add(fileStreamContent2);

// Additional data for image 2
multiContent.Add(new StringContent(appFileDTOs[1].CategoryName), "appFileDTOs[1].CategoryName");
multiContent.Add(new StringContent(appFileDTOs[1].CategoryDescription), "appFileDTOs[1].CategoryDescription");
multiContent.Add(new StringContent(appFileDTOs[1].Detail), "appFileDTOs[1].Detail");

// Send (url = url of api)
var response = await client.PostAsync(url, multiContent);

Answer 3

一次选择一张图像，然后将其与CategoryName，CategoryDe​​scription，Detail一起添加到列表中，作为列表发送。

现在您可以发布包含多张图片以及其他数据的列表