Node.js Azure Functions从URL上传图片到Azure Blob的实现方法

• 图片URL拼接时额外包裹了双引号，导致fetch请求的目标地址非法，无法正常拉取图片流
• 冗余引入parse-multipart相关解析逻辑：当前场景是接收请求携带的源图URL字符串，并非处理multipart格式的文件上传请求，这部分代码不仅无用，还可能干扰正常执行流程
• 直接传递fetch返回的浏览器兼容Blob对象给Azure Blob SDK，Node.js环境下的Blob对象不符合SDK要求的上传入参格式，会触发类型校验失败
• 异步流程未使用await阻塞等待：fetch链式调用中触发的上传逻辑没有等待执行完成，HTTP响应就提前返回，容易出现函数实例被回收导致上传中断的问题
• 文件名截取逻辑未剥离URL附带的查询参数，遇到带签名参数的图床URL时，生成的Blob文件名会包含?等非法字符，导致上传失败

const { BlobServiceClient } = require("@azure/storage-blob");

// 从环境变量读取存储连接串，避免硬编码
const AZURE_STORAGE_CONNECTION_STRING = process.env["AZURE_STORAGE_CONNECTION_STRING"];

module.exports = async function (context, req) {
    context.log("JavaScript HTTP trigger function processed a request.");

    // 兼容从查询参数、请求体两种方式传入的源图片URL
    const sourceImageUrl = req.query.imageUrl || (req.body && req.body.secure_url);
    
    if (!sourceImageUrl) {
        context.res = {
            status: 400,
            body: "请在查询参数或请求体中传入有效的图片源URL"
        };
        return;
    }

    try {
        // 拉取源图片流，Node.js 18+ 内置全局fetch，无需额外安装node-fetch依赖
        const imageResponse = await fetch(sourceImageUrl, { method: 'GET' });
        if (!imageResponse.ok) {
            throw new Error(`获取源图片失败，响应状态码：${imageResponse.status}`);
        }

        // 直接将响应流转为Buffer，完全匹配Azure Blob SDK的上传入参要求
        const imageBuffer = Buffer.from(await imageResponse.arrayBuffer());

        // 初始化Blob存储客户端
        const blobServiceClient = BlobServiceClient.fromConnectionString(AZURE_STORAGE_CONNECTION_STRING);
        const containerClient = blobServiceClient.getContainerClient("sepik01-rdp-media-assets-migration");
        
        // 用内置URL解析能力生成合法Blob文件名，自动剥离查询参数
        const urlPath = new URL(sourceImageUrl).pathname;
        const blobName = urlPath.substring(urlPath.lastIndexOf('/') + 1);

        // 执行上传，自动携带源文件的Content-Type头，避免浏览器访问时强制下载
        const blockBlobClient = containerClient.getBlockBlobClient(blobName);
        await blockBlobClient.upload(imageBuffer, imageBuffer.length, {
            blobHTTPHeaders: { blobContentType: imageResponse.headers.get("content-type") }
        });

        context.res = {
            status: 200,
            body: `图片已成功上传，存储路径：${containerClient.url}/${blobName}`
        };
    } catch (error) {
        context.log.error("上传流程异常", error);
        context.res = {
            status: 500,
            body: `上传失败：${error.message}`
        };
    }
};

实现优势 #

• 移除了node-fetch、parse-multipart两类冗余依赖，缩减依赖包体积，降低冷启动时间
• 全链路基于async/await做异步流程控制，完全匹配Azure Functions的执行模型，不会出现函数提前回收导致的上传中断问题
• 上传时自动写入源图片的MIME类型，保证Blob文件的类型识别准确，支持浏览器直接预览
• 文件名生成使用标准URL解析能力，比正则匹配更稳定，自动过滤带签名参数的URL后缀，避免非法文件名
• 增加全链路异常捕获，请求失败、上传失败时返回明确的错误信息，降低排查成本

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