如何使用 express-fileupload 将图像从 React Native 应用程序上传到 Express 服务器？

Question

我正在尝试将图像从react-native 应用程序上传到express.js 服务器，但我不知道如何使用express-fileupload 来完成。

在应用程序中，我创建了 FormData 实例并将上传的图像数据附加到数据中。附加后，我尝试将数据发送到我的express.js服务器，但我在req.body而不是req.files中收到profilePic。

如果我尝试从react.js 应用程序上传图像，那么我将在req.files 中获取图像。

反应本机代码：

  let profilePicData = null;

  const formData = new FormData();

  const formDataAppend = (
    bio,
    profession,
    linkedinProfileLink,
    instagramProfileLink,
    twitterProfileLink,
    otherProfileLink,
    profilePic,
  ) => {
    console.log("profilePicData inf:", profilePicData);

    formData.append("name", name);
    formData.append("email", email);
    formData.append("bio", bio);
    formData.append("profession", profession);
    formData.append("linkedinProfileLink", linkedinProfileLink);
    formData.append("instagramProfileLink", instagramProfileLink);
    formData.append("twitterProfileLink", twitterProfileLink);
    formData.append("otherProfileLink", otherProfileLink);
    formData.append("profilePic", profilePicData);
  };

  const handleSubmitButton = async (
    bio,
    profession,
    linkedinProfileLink,
    instagramProfileLink,
    twitterProfileLink,
    otherProfileLink,
  ) => {
    try {
      setLoading(true);
      const apiHeaders = {
        "User-Agent":
          "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0",
        Accept: "multipart/form-data",
        token: token,
      };
      formDataAppend(
        bio,
        profession,
        linkedinProfileLink,
        instagramProfileLink,
        twitterProfileLink,
        otherProfileLink,
      );
      console.log(formData);
      await axios
        .post(`${baseUrl}/api/users`, formData, {
          headers: apiHeaders,
        })
        .then((res) => {
          console.log(res);
          setLoading(false);
          navigation.replace("HomeScreen");
        })
        .catch((err) => {
          console.log(err);
        });
      setLoading(false);
    } catch (err) {
      setError(err);
      setLoading(false);
    }
  };

  async function handleChoosePhoto() {
    const options = {
      noData: true,
    };
    await launchImageLibrary(options, (response) => {
      if (response) {
        profilePicData = {
          uri: response.assets[0].uri.replace("file://", ""),
          type: response.assets[0].type,
          name: response.assets[0].fileName,
        };
        setProfilePic(profilePicData.uri);
        console.log("profilePicData", profilePicData);
      }
    });
  }

我可以使用express-fileupload上传图片吗？因为我可以在react.js中使用它来上传图片，但在react-native中我不能这样做。我可以使用express-fileupload还是应该使用multer？

Answer 1

要使用 express-fileupload 中间件将图像从 React Native 应用程序上传到 Node.js 服务器，您可以按照以下步骤操作：

1. 通过运行以下命令在 Node.js 服务器上安装 express-fileupload 包：

   npm 安装 express-fileupload

2. 在您的 Node.js 服务器中，导入 express-fileupload 包并使用它将 fileUpload 中间件添加到您的 express 应用程序：

   const fileUpload = require('express-fileupload'); const app = express();

   应用程序使用（文件上传（））；

3. 在您的 React Native 应用程序中，使用 fetch API 向您的 Node.js 服务器发出 POST 请求，将图像文件作为请求主体传递。您可以包含 Content-Type: multipart/form-data 标头来指定请求的内容类型：

   const formData = new FormData(); formData.append('image', {uri: '', name: 'image.jpg', type: 'image/jpg'});

   fetch('http://localhost:3000/upload', { 方法：'POST'， 正文：表单数据， 标题：{ '内容类型'：'多部分/表单数据' } }) .then(响应=> response.json()) .then(responseData => { // 对响应数据做一些事情 }) .catch(错误=> { // 处理错误 });

4. 在您的 Node.js 服务器上，您可以在 express-fileupload 中间件提供的 req.files 对象中访问上传的图像。然后，您可以使用 File 对象的 mv 方法将文件保存到服务器上的特定位置：

   app.post('/upload', (req, res) => { 如果 (!req.files || 对象