node.js - 如何在没有express/multer的情况下处理 Node 中post请求的图像数据？

Question

我正在尝试将带有图像的 POST 请求提交到 azure 函数端点。端点将把图像上传到azure blob存储。一切都已连接，但我不确定如何处理要上传到 blob 存储帐户的表单编码图像数据。我想避免添加 express ，并正在寻找穆特的替代品。我尝试查阅文档，但它也使用express/multer。

下面是到目前为止我所拥有的 azure 函数。目前可以将其上传到 azure 存储帐户，但数据不正确，因为当我尝试下载或查看它时无法显示。

export const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    const storageConnectionString = config.storageConnectionString;

    // Create the BlobServiceClient object which will be used to create a container client
    const blobServiceClient = BlobServiceClient.fromConnectionString(storageConnectionString);

    // Create a unique name for the container
    const containerName = config.storageContainerName;

    // Get a reference to a container
    const containerClient = blobServiceClient.getContainerClient(containerName);

    const blobName = context.bindingData.imageName;

    // Get a block blob client
    const blockBlobClient = containerClient.getBlockBlobClient(blobName);

    if (req.method === "POST")
    {
      const content = req.body;
      const blobHeaders: BlobHTTPHeaders = {
        blobContentType: "image/jpeg",
      }
      const options: BlockBlobUploadOptions = {blobHTTPHeaders: blobHeaders};
      const uploadBlobResponse = await blockBlobClient.upload(content, content.length, options);
    }

};

这是 postman 删除 token 和图像路径的请求。

curl --location --request POST 'http://localhost:7071/api/images/jaimeLannister.jpg' \
--header 'Cookie: BL_SiteLanguageID=1; __RequestVerificationToken=TOKEN' \
--form 'image=@/C:/jaimeLannister.jpg'

如有任何帮助，我们将不胜感激!

Answer 1

正如 wvilSnobu 所说，你可以使用 parse-multipart来自 npm，它似乎是一个更轻量级的替代方案。

引用代码如下:

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

    const streamifier = require('streamifier');
    const multipart = require('parse-multipart');
    const azureStorage = require('azure-storage');

    var bodyBuffer = Buffer.from(req.body);
    var boundary = multipart.getBoundary(req.headers['content-type']);
    var parts = multipart.Parse(bodyBuffer, boundary);

    var filedata = parts[0].data;         // Image buffer data
    var filename = parts[0].filename; 

    var a=azureStorage.createBlobService('xxxx','xxxxxxxxxxxx');
    try {
        var b= a.createBlockBlobFromStream('container', filename, streamifier.createReadStream(new Buffer (filedata)), filedata.length,(err, result)=>{
            if(err){
                console.log("Image upload failed", err);
            }
        });
    } catch (error) {
        console.error(error);
    }
};

我使用 Postman 发送图像:

将图像上传到门户后，blob 内容为 application/octet-stream，我可以成功下载并查看它。

更多详情可以引用这个article .

更新:

azure-storage 库和“new Buffer”均已过时。请参阅使用 @azure/storage-blob 的代码。

import { AzureFunction, Context, HttpRequest } from "@azure/functions";
import { config } from "../cosmos/config";
import { BlobServiceClient, BlockBlobUploadStreamOptions } from "@azure/storage-blob";
const streamifier = require("streamifier");
const multipart = require("parse-multipart");

export const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    const storageConnectionString = config.storageConnectionString;

    // Create the BlobServiceClient object which will be used to create a container client
    const blobServiceClient = BlobServiceClient.fromConnectionString(storageConnectionString);

    // Create a unique name for the container
    const containerName = config.storageContainerName;

    // Get a reference to a container
    const containerClient = blobServiceClient.getContainerClient(containerName);

    // Gets the file name from the url, could be a bug if you want the filename from the file contents
    const blobName = context.bindingData.imageName;

    // Get a block blob client
    const blockBlobClient = containerClient.getBlockBlobClient(blobName);

    if (req.method === "POST")
    {
      const bodyBuffer = Buffer.from(req.body);
      const boundary = multipart.getBoundary(req.headers['content-type']);
      const parts = multipart.Parse(bodyBuffer, boundary);
      const filedata = parts[0].data;
      const filename = parts[0].filename;
      const options: BlockBlobUploadStreamOptions = {};
      try
      {
        const result = await blockBlobClient.uploadStream(streamifier.createReadStream(Buffer.from(filedata)), filedata.length);
        context.res = { status: 200 };
        return;
      }
      catch(err)
      {
        console.log(err);
      }
    }

    context.res = { status: 302, headers: { "location": blockBlobClient.url }, body: null};

};