在.NET C# WebForms中集成Face API（JS方式）遇无效图片URL问题

首先得明确，你遇到的问题核心是Face API无法直接识别本地上传的文件路径——官网的JS示例用的是公网可访问的图片URL，但用户上传的文件仅存在浏览器本地，直接把文件路径传给API肯定会报错。下面给你两个可行的解决思路：

思路1：将上传图片转为Base64编码传给API #

Face API支持接收Base64格式的图片数据，不需要依赖外部URL。你可以修改前端代码，把用户上传的文件转成Base64，然后在请求里用body传递二进制数据，而非url参数。

示例代码片段：

$("#a").change(function (evt) {
    var file = evt.target.files[0];
    if (!file) return;

    // 读取文件并转为Base64格式
    var reader = new FileReader();
    reader.onload = function(e) {
        // 去掉Base64字符串里的"data:image/jpeg;base64,"前缀
        var base64Data = e.target.result.split(',')[1];
        // 调用Face API
        $.ajax({
            url: 'https://<你的区域>.api.cognitive.microsoft.com/face/v1.0/detect',
            method: 'POST',
            headers: {
                'Content-Type': 'application/octet-stream',
                'Ocp-Apim-Subscription-Key': '<你的订阅密钥>'
            },
            data: atob(base64Data), // 将Base64转成二进制数据
            processData: false,
            success: function(response) {
                console.log('识别结果:', response);
            },
            error: function(xhr, status, error) {
                console.error('请求错误:', error);
            }
        });
    };
    reader.readAsDataURL(file);
});

思路2：先上传图片到WebForms后端，再传递临时公网URL给API #

如果不想用Base64，你可以先把用户上传的文件提交到WebForms服务器，保存为临时文件后生成一个可被Face API访问的URL，再将这个URL传给API。

后端（C#）示例： #

protected void UploadButton_Click(object sender, EventArgs e)
{
    if (FileUpload1.HasFile)
    {
        string tempPath = Server.MapPath("~/TempUploads/");
        // 确保临时目录存在
        if (!Directory.Exists(tempPath))
        {
            Directory.CreateDirectory(tempPath);
        }
        // 生成唯一文件名避免冲突
        string fileName = Guid.NewGuid().ToString() + Path.GetExtension(FileUpload1.FileName);
        string fullPath = Path.Combine(tempPath, fileName);
        FileUpload1.SaveAs(fullPath);
        
        // 生成可访问的URL（本地测试时需用ngrok等工具暴露公网地址，否则Face API无法访问localhost）
        string imageUrl = Request.Url.GetLeftPart(UriPartial.Authority) + "/TempUploads/" + fileName;
        
        // 将URL传递给前端
        ClientScript.RegisterStartupScript(this.GetType(), "imageUrl", $"var imageUrl = '{imageUrl}';", true);
    }
}

前端JS调用： #

拿到后端返回的imageUrl后，就可以像官网示例那样调用API了：

// 确保已拿到后端传递的imageUrl
$.ajax({
    url: 'https://<你的区域>.api.cognitive.microsoft.com/face/v1.0/detect',
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Ocp-Apim-Subscription-Key': '<你的订阅密钥>'
    },
    data: JSON.stringify({ url: imageUrl }),
    success: function(response) {
        console.log('识别结果:', response);
    },
    error: function(xhr, status, error) {
        console.error('请求错误:', error);
    }
});

关键注意事项 #

• 使用Base64方式时，务必把请求的Content-Type设为application/octet-stream，并去掉Base64前缀后转成二进制数据。
• 用后端临时URL方式时，本地测试Face API无法访问localhost地址，需要用ngrok等工具将本地服务暴露为公网地址，或者把图片上传到Azure Blob Storage等云存储生成公网URL。
• 记得替换代码里的<你的区域>和<你的订阅密钥>为你自己Face API的真实信息。

内容的提问来源于stack exchange，提问作者V.Dum