Azure Functions v4实现静态Web应用文件上传的问题求助

我在为静态Web应用实现简单文件上传时遇到了问题，当前使用Azure Functions v4处理请求。普通请求和form-data请求可以通过如下代码处理（请求体为JSON字符串）：

app.http('addItem', {
methods: ['POST'],
authLevel: 'anonymous',
handler: async (request, context) => {
    context.log(`Http function processed request for url "${request.url}"`);

    let itemJSON = await request.text();
/* do some stuff here */
}
});

但提交文件时，我无法从后端获取文件以将其缓冲区/流上传至Azure Blob存储。尝试使用formData()和text()方法时，总是出现奇怪的后端错误：

app.http( 'fileupload', {
methods: ['POST'],
authLevel: 'anonymous',
handler: async ( req, context ) => {

    let formData = await req.formData();
    /*let textData = await req.text();*/
}
});

虽然有更多请求访问选项，但我不知道如何将文件转换为Blob或流以传递给Blob存储上传操作。我找不到使用v4函数处理文件上传的示例，仅看到一些使用multer的旧示例，但我未使用Express，认为实现起来较为复杂。请问有人能指点我如何正确获取文件（目前仅需单文件上传），并无需本地保存直接将请求流/请求Blob传递至Azure Blob存储吗？

1. 正确获取form-data中的文件 #

在Azure Functions v4的HTTP handler中，使用req.formData()获取表单数据后，文件会以File对象的形式存在。你可以通过表单字段名直接取出该文件，然后将其转换为可读流：

app.http('fileupload', {
  methods: ['POST'],
  authLevel: 'anonymous',
  handler: async (req, context) => {
    try {
      const formData = await req.formData();
      // 假设前端表单的文件字段名为"file"
      const file = formData.get('file');
      if (!file) {
        return { status: 400, body: '未上传文件' };
      }

      // 将File对象转换为可读流
      const fileStream = file.stream();
      // 后续上传到Blob存储
    } catch (err) {
      context.error('处理文件上传失败:', err);
      return { status: 500, body: '服务器内部错误' };
    }
  }
});

2. 直接上传到Azure Blob存储 #

使用@azure/storage-blob包，直接将文件流上传到Blob存储，无需本地保存。先安装依赖：

npm install @azure/storage-blob

修改handler代码完成上传：

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

app.http('fileupload', {
  methods: ['POST'],
  authLevel: 'anonymous',
  handler: async (req, context) => {
    try {
      const formData = await req.formData();
      const file = formData.get('file');
      if (!file) {
        return { status: 400, body: '未上传文件' };
      }

      // 从环境变量获取Blob存储连接字符串
      const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);
      // 获取目标容器客户端
      const containerClient = blobServiceClient.getContainerClient('your-container-name');
      // 创建Blob客户端，使用原始文件名
      const blobClient = containerClient.getBlockBlobClient(file.name);

      // 上传文件流到Blob存储，同时设置文件MIME类型
      await blobClient.uploadStream(file.stream(), undefined, undefined, {
        blobHTTPHeaders: { blobContentType: file.type }
      });

      return { status: 200, body: `文件 ${file.name} 上传成功` };
    } catch (err) {
      context.error('上传失败:', err);
      return { status: 500, body: '文件上传失败' };
    }
  }
});

注意事项 #

• 确保Azure Functions配置了AZURE_STORAGE_CONNECTION_STRING环境变量，指向你的Blob存储账户。
• 前端提交表单时必须使用multipart/form-data编码类型，且文件字段名要和后端代码中的一致（示例中为"file"）。
• 若遇到跨域问题，需在Azure Functions的CORS设置中添加前端域名。

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