如何在C# WebAPI中上传Blob并转换为图片保存

这里是一套完整的实现流程，从Canvas生成图片并转换为Blob，通过FormData上传到C# WebAPI接口，最终将图片保存到服务器指定目录：

前端JavaScript实现 #

这段代码负责把Canvas中的图像内容转换为Base64字符串，再转成Blob对象，最后通过XMLHttpRequest提交到API：

function uploadCanvasImage() {
    // 将Canvas内容转为JPEG格式的Base64编码字符串
    var blob = canvas.toDataURL("image/jpeg");
    // 移除Base64字符串的前缀部分
    var jpegFile64 = blob.replace(/^data:image\/(png|jpeg);base64,/, "");
    // 将处理后的Base64转成Blob对象
    var jpegBlob = base64ToBlob(jpegFile64, 'image/jpeg');
    
    // 创建FormData对象，用于携带文件数据
    var data = new FormData();
    // 把Blob添加到FormData，同时指定上传后的文件名
    data.append("mypic", jpegBlob, "thisimage.jpg");

    // 发起POST请求到API接口
    var oReq = new XMLHttpRequest();
    oReq.open("POST", "http://localhost:52704/api/uploadfile/myfile.jpg/", true);
    oReq.onload = function (oEvent) {
        // 弹出API返回的结果提示
        alert(this.responseText);
    };
    oReq.send(data);
}

// 工具函数：将Base64字符串转换为Blob对象
function base64ToBlob(base64, mime) {
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, { type: mime });
}

后端C# WebAPI实现 #

这段代码负责接收前端上传的文件，验证文件存在后保存到服务器的指定目录：

public string Post(string id)
{
    string result = null;
    var httpRequest = HttpContext.Current.Request;
    string fileCount = httpRequest.Files.Count.ToString();

    if (httpRequest.Files.Count > 0)
    {
        var postedFile = httpRequest.Files[0];
        // 拼接保存路径，注意这里要确保服务器对该目录有读写权限
        var filePath = "c:/inetpub/wwwroot/pics/" + postedFile.FileName;
        // 将上传的文件保存到指定路径
        postedFile.SaveAs(filePath);
        result = "File saved as " + filePath;
    }
    else
    {
        result = "Upload failed: No files were uploaded";
    }
    return result;
}

关键注意点 #

• 前端需确保canvas对象已正确初始化并绘制了图像内容，否则转换出的Blob会是空的
• 后端的保存路径c:/inetpub/wwwroot/pics/需要提前创建，并且服务器进程（比如IIS）要有该目录的读写权限，否则会抛出权限异常
• 注意原后端代码中的拼写错误：C#里HttpPostedFile的文件名属性是**FileName**（首字母大写），不是小写的Filename，这一点需要修正才能正确获取文件名

内容的提问来源于stack exchange，提问作者Dave