如何访问前端通过 JS FormData 传递的用 Python 编写的 Google Cloud Function 中的数据？

Question

我有一个 ReactJS 前端，我在其中发送数据以及

FormData

结构中的 POST 请求正文有效负载，但我无法使用

request

参数访问我用 Python 编写的 Google Cloud 函数中的数据。以下是我的前端代码：

handleUpload = async (file: any, dataFromChild: any) => {
      const token = await auth?.currentUser?.getIdToken();

      if (!token) {
        enqueueSnackbar(`Session Expired. Login again`, { variant: "error" });
        window.location.href("/login")
      }

      if (file) {
        try {
          const snackbarRef = enqueueSnackbar("Uploading File...", {
            variant: "info",
          });
          const payload = new FormData();
          payload.append("file", file[0]);
          payload.append("name", dataFromChild?.fileName);
          payload.append("description", dataFromChild?.fileDesc);
          payload.append("title", dataFromChild?.selectedType);
          payload.append("price", 0);

          const response = await fetch(
            `[Cloud Function URL]`,
            {
              method: "POST",
              headers: {
                Authorization: `Bearer ${token}`,
                "Content-Type": "multipart/form-data",
              },
              body: payload
            }
          );
          closeSnackbar(snackbarRef);
          if (response.ok) {
            enqueueSnackbar(`File uploaded successfully.`, {
              variant: "success",
            });
            this.setState({ fileUploaded: false });

          } else {
            enqueueSnackbar(`Error uploading file.`, { variant: "error" });
            this.setState({ fileUploaded: false });

          }
        } catch (error) {
          enqueueSnackbar(`Error occurred while uploading the file.`, {
            variant: "error",
          });
          this.setState({ fileUploaded: false });

        }
      }
    };

我尝试在Python中使用以下方式访问数据：

import functions_framework

@functions_framework.http
def main(request):
    headers = set_cors_headers(request)

    if request.method == "OPTIONS":
        return headers

    get_data(request)


def get_data(request):
    print(request.files['file'])
    print(request.form['name']
    .
    .

但是它没有得到任何数据。我什至尝试通过这种方式获取数据：

def get_data(request):
    print(request.files.get('file')
    print(request.form.get('name')
    .
    .

但这一切都是徒劳。有人告诉我我做错了什么吗？

Answer 1

我不知道原因，但就我而言，我必须从前端删除代码行，在发送

Content-Type

请求之前将

multipart/form-data

设置为

POST

。所以我更新的前端代码如下所示：

handleUpload = async (file: any, dataFromChild: any) => {
      const token = await auth?.currentUser?.getIdToken();

      if (!token) {
        enqueueSnackbar(`Session Expired. Login again`, { variant: "error" });
        window.location.href("/login")
      }

      if (file) {
        try {
          const snackbarRef = enqueueSnackbar("Uploading File...", {
            variant: "info",
          });
          const payload = new FormData();
          payload.append("file", file[0]);
          payload.append("name", dataFromChild?.fileName);
          payload.append("description", dataFromChild?.fileDesc);
          payload.append("title", dataFromChild?.selectedType);
          payload.append("price", 0);

          const response = await fetch(
            `[Cloud Function URL]`,
            {
              method: "POST",
              headers: {
                Authorization: `Bearer ${token}`,
                "Content-Type": "multipart/form-data", // REMOVED THIS LINE
              },
              body: payload
            }
          );
          closeSnackbar(snackbarRef);
          if (response.ok) {
            enqueueSnackbar(`File uploaded successfully.`, {
              variant: "success",
            });
            this.setState({ fileUploaded: false });

          } else {
            enqueueSnackbar(`Error uploading file.`, { variant: "error" });
            this.setState({ fileUploaded: false });

          }
        } catch (error) {
          enqueueSnackbar(`Error occurred while uploading the file.`, {
            variant: "error",
          });
          this.setState({ fileUploaded: false });

        }
      }
    };