通过附加二进制图像内容修补现有 OneNote 页面答案

【问题标题】：PATCH existing OneNote Page by appending binary image content通过附加二进制图像内容修补现有 OneNote 页面
【发布时间】：2017-12-07 02:32:45
【问题描述】：

使用 Microsoft Graph v1.0 api 和 C#，我可以更新（修补）现有 OneNote 页面，但是在将图像数据写入 multipart/form-data 部分后，生成的图像高度和宽度是正确的，但是，图像不会在页面上呈现——除了一个空的图像占位符。

所以问题是，OneNote 对 PATCH 命令的正确图像格式是什么？文档声明它必须是“二进制图像数据”。 File.ReadAllBytes 不应该足够吗？

以下是目前尝试的格式：

string file = @"c:\images\file1.jpg";

var rawData = System.IO.File.ReadAllText(file); //attempt1
byte[] bytes = System.IO.File.ReadAllBytes(file);  //attempt2
var byteArray = BitConverter.ToString(bytes);   //attempt3
var byteString = Encoding.ASCII.GetString(bytes);  //attempt4
string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);  //attempt5
string imageDataURL = string.Format("data:image/jpeg;base64,{0}", base64String);  //attempt6

...

/* Construct message content */
StringBuilder sb = new StringBuilder();
sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""Commands"""  + "\r\n");
sb.Append("Content-Type: application/json" + "\r\n" + "\r\n");

sb.Append(
@"[{
    'target':'body',
    'action':'append',
    'position':'before',
    'content':'<img src=""name:image1"" width=""400"" height=""500""/>'
}]" 

+ "\r\n" + "\r\n");

sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""image1""" + "\r\n");
sb.Append("Content-Type: image/jpeg" +  "\r\n\r\n" );
sb.Append([see formats above] + "\r\n");
sb.Append("--MyPartBoundary198374--" );

string content = sb.ToString();
string contentType = "multipart/form-data; boundary=MyPartBoundary198374";
var result = await OneNoteService.UpdatePageAsync(client, page, contentType, content);

...

internal static async Task <HttpResponseMessage> UpdatePageAsync(GraphServiceClient client, OnenotePage page, string contentType, string content)
{
    HttpResponseMessage response = null;

    try
    {
        string requestUri = client.Users[ME].Onenote.Pages[page.Id].Content.Request().RequestUrl;

        List<OnenotePatchContentCommand> patchCommands = new List<OnenotePatchContentCommand>();

        HttpRequestMessage request = new HttpRequestMessage()
        {
            Method = new HttpMethod("PATCH"),
            RequestUri = new Uri(requestUri),
            Content = new StringContent(content, Encoding.UTF8, "application/json"),
        };

        request.Content.Headers.Remove("Content-Type");
        request.Content.Headers.TryAddWithoutValidation("Content-Type", contentType);

        // Adds the user's access token from the GraphServiceClient to the request.
        await client.AuthenticationProvider.AuthenticateRequestAsync(request);

        response = await client.HttpProvider.SendAsync(request);

        if (!response.IsSuccessStatusCode)
        {
            throw new Microsoft.Graph.ServiceException(
                new Error
                {
                    Code = response.StatusCode.ToString(),
                    Message = await response.Content.ReadAsStringAsync()
                });
        }
    }
    catch (Exception ex)
    {
        //TODO: Error handling
        Console.WriteLine(ex.ToString());
    }
    return response;
}

这篇文章中列出的建议并没有解决问题： Inserting image into existing OneNote page via REST api not working

一天多来一直在尝试解决此问题。有人可以提供 PATCH 命令所期望的正确图像数据格式吗？

谢谢，罗兰

【问题讨论】：

您是否尝试过在src 属性中直接使用base64String（即不将其作为单独的部分发送）？
src= 解决方案奏效了，马克！太感谢了！对此，我真的非常感激。如果其他人正在阅读，base64String 必须以“data:image/jpeg;base64”为前缀，因此在这种情况下，请使用 imageDataURL 字符串（在原始帖子中尝试 6）。

标签： c# microsoft-graph-api onenote

【解决方案1】：

将先前的评论移至答案，以防其他人遇到此问题。

与其发送多个部分，不如组合尝试 5 和 6，并将结果直接包含在 src 属性中：

string base64String = Convert.ToBase64String(bytes, 0, bytes.Length);  //attempt5
string imageDataURL = string.Format("data:image/jpeg;base64,{0}", base64String);  //attempt6

/* Construct message content */
StringBuilder sb = new StringBuilder();
sb.Append("--MyPartBoundary198374" + "\r\n");
sb.Append(@"Content-Disposition: form-data; name=""Commands"""  + "\r\n");
sb.Append("Content-Type: application/json" + "\r\n" + "\r\n");

sb.Append(
@"[{
    'target':'body',
    'action':'append',
    'position':'before',
    'content':'<img src=" + imageDataURL  + " width=""400"" height=""500""/>'
}]" 

+ "\r\n" + "\r\n");

这会将图像直接包含在您插入的 HTML 中。

【讨论】：