node.js 的 Multer / react-native 不工作

Question

我正在使用 reaction-native 创建一个应用程序，我正在使用图像选择器 select 图像并单击按钮创建一个将图像发送到 node.js 服务器.

但是，在上传图片的过程中，其他附加信息通常会存储在mysql中，但图片不会存储在上传文件夹中。

Multer 版本 1.4.2。 Node.js 版本 16.12.0

在本机代码中（数据到 node.js）

onPress={() => {
                  if (this.state.image === null) {
                    alert("이미지를 넣어주세요");
                  } else {
                    Alert.alert(
                      "구인 공고를 등록할까요?",
                      "등록후, 수정할 수 없으니 꼼꼼히 확인 부탁~!!",
                      [
                        {
                          text: "Cancel",
                          onPress: () => alert("취소하였습니다."),
                          style: "cancel"
                        },
                        {
                          text: "OK",
                          onPress: async () => {
                            const formData = new FormData();
                            formData.append("db_title", this.state.title);
                            formData.append("db_wtype", this.state.type);
                            formData.append("db_sdate", this.state.start);
                            formData.append("db_edate", this.state.end);
                            formData.append("db_money", this.state.money);
                            formData.append(
                              "db_address",
                              this.state.address
                            );
                            formData.append(
                              "db_description",
                              this.state.addition
                            );
                            formData.append("file", this.state.image);
                            formData.append("db_stime", "9");
                            formData.append("db_etime", "18");
                            formData.append("db_smin", "00");
                            formData.append("db_emin", "30");
                            await AsyncStorage.getItem("pubKey").then(
                              (pubKey) => {
                                formData.append("db_pubkey", pubKey);
                              }
                            );

                            const {
                              data: { result }
                            } = await axios.post(
                              "http://127.0.0.1:4000/upload",
                              formData
                            );
                            console.log(result);
                            alert(result);
                            this.props.navigation.navigate("Announce");
                          }
                        }
                      ],
                      { cancelable: false }
                    );
                  }
                }}

在我的节点服务器代码中

const multer = require('multer');

const _storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, '/upload')
    },
    filename: function (req, file, cb) {
      cb(null, file.fieldname + '-' + Date.now())
    }
  })
const upload = multer({ storage: _storage });

router.post("/", upload.single("file"), function (req, res) {

  console.log(req.body);
  console.log(req.body.file);

  Article.create({
    db_title: req.body.db_title,
    db_wtype: req.body.db_wtype,

    db_sdate: req.body.db_sdate,
    db_edate: req.body.db_edate,

    db_stime: req.body.db_stime,
    db_etime: req.body.db_etime,

    db_smin: req.body.db_smin,
    db_emin: req.body.db_emin,

    db_pubkey: req.body.db_pubkey,

    db_money: req.body.db_money,
    db_address: req.body.db_address,
    db_description: req.body.db_description,
    db_img: req.body.file
  })
    .then(result => {
      console.log("result : " + result);
      res.status(201).json({ result: "공고가 등록 되었습니다." });
    })
    .catch(err => {
      console.error("err : " + err);
    });
 });

 module.exports = router;

这是node.js控制台日志

编辑图像选择器（this.state.image）

    _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3]
    });

    console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ");
    console.log(
      result
    );
    console.log("%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% ");
    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };

Answer 1

您需要使用multer制作的路径：

变化：

db_img: req.body.file

至

db_img: req.file.path

node.js 的 Multer / react-native 不工作

Multer with node.js / react-native not working

node.js

express

multer

react-native

axios