如何将图像从本机反应上传到nodejs？

Question

我正在尝试将带有 expo 选择器图像的图像上传到 nodejs 服务器。 问题是我从未收到图像。我尝试了很多我绝望的事情:(

这是我的代码：

反应原生

  postImage = async (image) => {
    const photo = {
      uri: image.uri,
      type: "image/jpg",
      name: "photo.jpg",
    };

    const form = new FormData();

    form.append("test", photo);

    axios.post(
      url,
      {
        body: form,
        headers: {
          'Content-Type': 'image/jpeg',
        }
      }
    )
    .then((responseData) => {
      console.log("Succes "+ responseData)
    })
    .catch((error) => {
      console.log("ERROR " + error)
    });
  }

  pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      // mediaTypes: ImagePicker.MediaTypeOptions.All,
      // allowsEditing: true,
      // aspect: [4, 3],
      quality: 1
    });

    if (!result.cancelled) {
      try {
        await this.postImage(result);
      } catch (e) {
        console.log(e);
      }

      this.setState({ image: result.uri });
    }
  };

它总是有效的。

这里是nodejs代码

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const multer = require('multer');
const fs = require("fs");

const app = express();
const upload = multer({ 
  dest: "upload/",
});

// app.use(upload.single("test"));

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());
app.listen(8080, () => {
  console.log("running ...")
})

app.post("/upload", upload.single("photo.jpg"), async (req, res) => {
  console.log("body =>", req.body);
  console.log('files => ', req.files);
  console.log("file =>", req.file);

  // const oldpath = req.body.;
  // const newpath = '/Users/mperrin/test/test-native/test-upload-photo/server/lol.jpg';

  // fs.rename(oldpath, newpath, (err) => {
  //   if (err) {
  //     throw err;
  //   }

  //   res.write('File uploaded and moved!');
  //   res.sendStatus(200);
  // });

  res.sendStatus(200);
});

我总是在控制台中看到这个，但我不知道该怎么处理......

body => {
  body: { _parts: [ [Array] ] },
  headers: { 'Content-Type': 'image/jpeg' }
}

目前仅创建文件夹“上传”。 我不知道在哪里可以得到文件，我想我真的错过了一些东西，但我不知道是什么。

感谢大家的帮助！

Answer 1

我以前从未使用过 multer，但在快速查看文档后，您似乎需要在标题中使用与节点侧帖子中期望的名称相同的名称

现在，在你的标题中

    name: 'photo.jpg'

以及您的节点帖子中的以下内容

    upload.single("test")

您的帖子正在寻找名称为“test”而不是“photo.jpg”的内容，而您发送的是“photo.jpg”

试试看，告诉我结果如何。

编辑：我的错误，你可能已经添加 名称：“测试”

到这里的标题而不是在照片对象中：

    axios.post(
          url,
          {
            body: form,
            headers: {
              'Content-Type': 'image/jpeg',
            }
          })