Xamarin.Forms 上传带有数据的多个图像

Question

I have found several tutorials on how to upload an image or multiple images in Xamarin. However, I have not found how to send multiple images with each image containing some satellite data.

This is how the model looks like on the server:

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

But the controller needs a list of data. Here is the Asp.Net Web Api endpoint:

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

How can I upload something like that?

I found something on stack overflow on how to upload a single image with satellite data:

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);

How would you upload multiple?

This is how I upload the images on Postman for testing purposes, which works perfectly:

Answer 1

i think you could use MultipartFormDataContent to add multiple images,and use ContentDispositionHeaderValue.Parameters to add the values of your Data.

for example:

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;
}

and get Content-Disposition parameters refer to https://stackoverflow.com/a/30193961/10768653

Answer 2

I ended up doing it like this:

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

select one image at a time and add it to list along with CategoryName,CategoryDescription,Detail at the end send it as list.

now you can post the list which contains multiple images along with other data