Xamarin.Forms Upload Multiple Images with Data

问题

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:

回答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

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

回答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

来源：https://stackoverflow.com/questions/59209643/xamarin-forms-upload-multiple-images-with-data

标签

ASP.NET

Xamarin

asp.net-web-api

xamarin.forms