如何将文件/图像上传到NetLify函数-DEV365 开发者社区

在这篇文章中，我们将使用FormData和busboy将图像（或任何文件）传递给Netlify function的过程。

NetLify函数是无服务器功能，可让您在不管理任何基础架构的情况下运行后端代码。它们可用于各种任务，包括处理表单提交，处理文件上传以及与其他API集成。

formdata 是一个Web API，可以轻松地创建和操纵表单数据作为HTTP请求的一部分发送。

busboy 是许多Express Middleware（例如multer）在引擎盖下的使用。

发送图像文件

要向函数发送图像文件，我们需要一个前端。出于演示目的，我们将使用文件输入和提交按钮的简单反应表单。我们将使用axios来向NetLify函数提出发布请求。首先，将axios安装为依赖项：

npm install axios

现在，创建一个具有以下代码的UploadForm.tsx组件：

import { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';

export function UploadForm() {
    const [image, setImage] = useState<File | null>(null);

    function handleChange(e: ChangeEvent<HTMLInputElement>) {
        if (e.target.files) {
            setImage(e.target.files[0]);
        }
    }

    async function handleSubmit(e: FormEvent<HTMLFormElement>) {
        e.preventDefault();

        if (!image) return;

        // Create a FormData object and append the image file
        const formData = new FormData();
        formData.append('image', image);

        // Send the FormData object to the Netlify function
        try {
            const { data } = await axios.post(
                '/.netlify/functions/upload',
                formData,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                },
            );
            console.log('Upload successful:', data);
        } catch (error) {
            console.error('Upload failed:', error);
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type='file' accept='image/*' onChange={handleChange} />
            <button type='submit'>Upload</button>
        </form>
    );
}

UploadForm组件允许用户选择图像文件并提交表单。提交表单时，它会创建一个FormData对象，附加所选图像，然后将邮政请求发送到NetLify函数。

配置功能和解析有效载荷

首先我们需要安装busboy＆@netlify/functions：

npm install busboy
npm install @netlify/functions
npm install --save-dev @types/busboy // If using TypeScript

现在在您的项目的根目录中创建一个名为netlify的新目录，然后在其中添加一个名为functions的文件夹。在netlify/functions目录中，创建一个名为upload.ts的新文件，并添加以下内容：

import busboy from 'busboy';
import { Handler } from '@netlify/functions';

type Fields = {
    image: {
        filename: string;
        type: string;
        content: Buffer;
    }[];
};

function parseMultipartForm(event): Promise<Fields> {
    return new Promise((resolve) => {
        const fields = { image: [] };
        const bb = busboy({ headers: event.headers });

        bb.on('file', (name, file, info) => {
            const { filename, mimeType } = info;

            file.on('data', (data) => {
                if (!fields[name]) fields[name] = [];

                fields[name].push({
                    filename,
                    type: mimeType,
                    content: data,
                });
            });
        });

        bb.on('close', () => {
            resolve(fields);
        });

        bb.end(Buffer.from(event.body, 'base64'));
    });
}

export const handler: Handler = async (event) => {
    try {
        const fields = await parseMultipartForm(event);

        if (!fields) {
            throw new Error('Unable to parse image');
        }

        console.log('fields is: ', fields);
        console.log('image is: ', fields.image);

        const image = fields.image[0];

        // Handle image however you want here...

        return {
            statusCode: 200,
            body: JSON.stringify(image),
        };
    } catch (error) {
        return {
            statusCode: 400,
            body: error.toString(),
        };
    }
};

要测试您的更改，请运行npx netlify dev，该npx netlify dev将打开本地开发窗口。然后，您可以通过输入添加您选择的图像并点击提交，这应该在您的终端中给您类似的东西：

就是这样！您现在已经通过图像并解析了您想做的任何事情。您可以轻松地扩展此方法来处理其他类型的文件上传或其他表单字段。如果您想部署应用程序，只需登录即可登录并在Netlify中连接您的GIT存储库并点击“部署”。