无法将表单数据作为“Multipart/formdata”发送

Question

无法在react native expo应用程序中以“Multipart/formdata”内容类型发送表单数据。当我们在react-native应用程序的post请求中发送formData对象时，我们无法获取req。需求主体。来自节点后端的文件

  export const saveUserAddVisitor = async data => {
  try {
    const apiUrl = configConstants.apiUrlWithPort;
    const addVisitorData = await axios.post(
      `${apiUrl}/api/v1/mobile/apartment/member`,
      data,
      {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
        },
      },
    );
    return addVisitorData;
  } catch (err) {
    return err;
  }
};

Answer 1

带有axios的代码看起来很好，只是一定要发送FormData类型，就像Rémi在这里说的那样https://stackoverflow.com/a/72454168/16205278

您可以在此函数之前构造 FormData，并将其直接在当前代码中与 axios 函数一起使用。

服务：

import axios from "axios";
import configConstants from "./config.js";

/**
 * Current function to save User Add Visitor
 * @param {*} data
 */
export const saveUserAddVisitor = async (data) => {
  try {
    const apiUrl = configConstants.apiUrlWithPort;
    const addVisitorData = await axios.post(
      `${apiUrl}/api/v1/mobile/apartment/member`,
      data,
      {
        headers: {
          Accept: 'application/json',
          "Content-Type": "multipart/form-data"
        }
      }
    );
    return addVisitorData;
  } catch (err) {
    return err;
  }
};

使用：

import {saveUserAddVisitor} from "./index"

const form = new FormData();
form.append("visitor", { firstName: "Jack", lastName: "Doe" });
saveUserAddVisitor(form);

API快递：

显然，express无法解析多部分形式的数据，除非有人帮忙，根据以下资源:https://codex.so/handling-any-post-data-in-express

您必须使用< code>multer中间件:

const multer = require('multer');

app.post('/', multer().none(), function (req, res, next) {
  req.body;
  //... some code
});

Answer 2

您可以尝试这样的没有Axios也能工作的东西:

export const saveUserAddVisitor = async data => {
    var data = new FormData()
    data.append('foo', {
        ...
    })
    try {
        const apiUrl = configConstants.apiUrlWithPort;
        const addVisitorData = await fetch(`${apiUrl}/api/v1/mobile/apartment/member`, {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'multipart/form-data'
            },
            body: data
        })
        return addVisitorData;
    } catch {
        return err;
    }
}

在我给了你一个客户端的工作代码的例子之后，但是问题可能来自于服务器；)