如何上传图片和POST数据到的Azure移动服务ApiController终点？ [英] How can I upload an image and POST data to an Azure Mobile Services ApiController endpoint?
问题描述
我想上传图片的和的 POST 表格数据（虽然理想情况下，我想它是 JSON ）到端点在我的的Azure移动服务应用程序。
I am trying to upload an image and POST form data (although ideally I'd like it to be json) to an endpoint in my Azure Mobile Services application.
我有 ApiController 方法：
[HttpPost]
[Route("api/upload/{databaseId}/{searchingEnabled}/{trackingEnabled}")]
public async Task<IHttpActionResult> Upload(string databaseId, string searchingEnabled, string trackingEnabled, [FromBody]string metadata) {
if (!Request.Content.IsMimeMultipartContent()) {
return BadRequest("No image is uploaded.");
}
else {
var provider = new MultipartMemoryStreamProvider();
await Request.Content.ReadAsMultipartAsync(provider);
foreach (var file in provider.Contents) {
// Process each image uploaded
}
}
}
这只能当我删除 [FromBody]字符串的元数据，但它的伟大工程。
当包含 [FromBody]字符串的元数据（如上），我得到的错误：
When [FromBody]string metadata is included (as above), I get the error:
The request entity's media type 'multipart/form-data' is not supported for this resource.
的然而的，我想 POST 其他元（这可能会很长，所以我不想把它放在URI）。
However, I would like to POST additional metadata (which can be long, so I don't want to put it in the Uri).
我怎样才能保持文件上传的逻辑，也是 POST 附加字符串数据到我的控制器？
How can I keep the file upload logic, and also POST additional string data to my controller?
我使用的Azure移动服务，因此这code是内部的 System.Web.Http.ApiController （如果该事项）。
I am using Azure Mobile Services, so this code is inside an System.Web.Http.ApiController (if that matters).
推荐答案
我所做的previously是使客户发布同时包含元数据和实际文件的JSON模式。每个文件都是那么一个base64连接的实际文件内容的codeD字符串。下面code应该能够处理数据的URI +的base64。
What I've done previously is to make the client post a json model which contains both the metadata and the actual files. Each file is then a base64 encoded string of the actual file content. The below code should be able to handle data uri + base64.
我的前端应用程序是通过使用<$ C $使用JavaScript文件API来获取到的FileReader 对象，它可以返回一个Base64（数据URI）的参考字符串C> readAsDataURL 方法。它基本上做这样的事情：
My frontend app is using the javascript File API to get a reference to a FileReader object which can return a base64 (data uri) string by using the readAsDataURL method. It's basically doing something like this:
var attachment = {};
function loadAttachmentFromFileInput(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var result = reader.result;
attachment = {
data: result,
filename: file.name,
type: file.type,
size: file.size
}
}
reader.readAsDataURL(file);
}
我要建设一个 POST 模式，将导致以下JSON内容：
I'm then building a POST model which results in the following json content:
{
"messageId": 1,
"foo": "bar",
"bar": "foo",
"attachments": [{
"filename": "stackoverflow.jpg",
"data": "data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAaABQDAREAAhEBAxEB/8QAmQABAAIDAAAAAAAAAAAAAAAACQUIBgcKAQABBQEBAAAAAAAAAAAAAAAIAAEEBgcFAxAAAAUCAwUFAg8AAAAAAAAAAgMEBQYBBxEUCAASFRYXIRM1NhgiJDFBU2NkJbXFN0iIGTlJmREAAQIEBAQEAwkBAAAAAAAAAQIDERMEBQASFAYhMUEVIhYHFzIjJPBRwZJDNEQ1Jhj/2gAMAwEAAhEDEQA/AO/UwwsoAjDRgLLD2iGYKgABpjhiIQq0pTtrsylJQnMsgJHU8BhwCowSCTg7L3z6TXPenazKFQ/afNS1v5eO5Wmw96kAq28vslimYoiSjcEA07JJmmTNSo9G9R9VSq9pzAFIAmVJqMIt7z3rc903d/08cS/tj1WoK1dbYy88VUV3bplEIg6iW05PaUQ/RLM1iYFCcGn0pLH042tZ9mW5j1CqU0u6vR+6UAt+4AywNdZlVOXOoNrzPU7tO6lDtJXNkM1MtTKiiYEnMfXLB/Tp1g4G5dSeN9K+hGIeffUR3/B+j2QxzGf497WZ3NzhPvuHd9m1q9+9v+23nGX/AKjUdv7Zm+o7zGX27LCZnndZeeT8yVm+Xjgf827j92fIWpZ8oabuXef4XYoTe65/hySeEuMdT9PHNxxsXUHMo092tq3As9KNTttp44L4jN2i0y5gezm9lShWhc15pXMrIpdKIXhtokGQ3KKrSVPxBqAWF+9RtK/t5doulmrL3ZK0yalmny50tEFRWQXWlkBQTCUqYDAp5YxfZqqmmvCLnb7lT2y60sHGHXY5S4DAJBCFpBgSfGMpEQeeDTUHRWVr45YtguY+zCMvsmb0TBp01oNNwbUX4t46phgEQ/aedQDpHuYD5NFk5ZihC3ruLjOJTDIAsAWZWlRWuW3bbuBTGyaW5PXGwuVYLVrv6KmjulA6JhS/Z7qtsOh5lSkBtlye3pm1spK0uFKiM2/vC47aqnN5JpEW6+t06ptdaAxVW6taUPHT3W155K2H/gdW3KAUsOFvMkEJD0ms10j4pzvHOJ5HNeqHctrzxzvwDpx1Q564Ly/z3kfq7PbneYe7449mxN+11m8udomL8ySv7WVT9x1MjT62dK/dSvBNhMycM+bxYx33b3B5k7nkHlSZl7NPq+16PU6vt0nUZtFP+ZJz5c/jhHBYWjhUglWkOxCWC2euRdFUwXa1cKVx1pNULbpiXQZSvv1LBJqvNFL8yFzWshAMwwkNQHhQ1JEKtA1PpWt+utpprqtBqXH21NcUltxbZ4gRjkIjy4RjDpjObfc37bnkIZWHIRDjaVjhHlmBhz4whHriw1g41qIZLwQFfNYFqkjMCQOLsoflVz9adir2wdsI5ZeyEKl2jpyFfPFoQOBxRZIm5YUeUcMBhgqkgMDWCxt9mnfRUayreDaswQ6oOJJgQDFaSpJEYgpUD0jCOJT97W+wtnS0jZWIZ20FtQEQeSVBJjCECCMV+yKH9irJZNLkeG45TLk5Xc9V/f49xudzu7/t/Bhj27WOP1H2+7HF6YHKXedJx/HD55m3iXiXmx68R+n/AC3zu9t7DkPjw2ID/NTZfnwsPl/S1+XPyH+nb8bfsv7y2j/q9fx5Yfpj/9k=",
"type": "image/jpeg"
}]
}
控制器看起来是这样的：
Controller looks like this:
[Route("api/messages/{messageId:guid}")]
public async Task<IHttpActionResult> Post(Guid messageId, CreateMessageAttachments model)
{
// Access to all properties in your post model
Trace.WriteLine(model.Foo);
Trace.WriteLine(model.Bar);
foreach (var attachment in model.Attachments)
{
// Do what you need to with the bytes from the uploaded attachments
var bytes = attachment.GetByteArray();
}
return Ok();
}
然后，我有以下型号支持控制器：
Then I have the following models to support the controller:
public class CreateMessageAttachments
{
public Guid MessageId { get; set; }
public string Foo { get; set; }
public string Bar { get; set; }
public IList<CreateAttachment> Attachments { get; set; }
}
public class CreateAttachment
{
public string Data { get; set; }
public string Filename { get; set; }
public string Type { get; set; }
public string GetBase64()
{
if (string.IsNullOrWhiteSpace(Data))
return null;
var index = Data.LastIndexOf("base64");
if (index == -1)
return Data;
return Data.Substring(index + 7);
}
public byte[] GetByteArray()
{
try
{
var base64 = GetBase64();
if (string.IsNullOrWhiteSpace(base64))
return null;
return Convert.FromBase64String(base64);
}
catch
{
return null;
}
}
}
这篇关于如何上传图片和POST数据到的Azure移动服务ApiController终点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
