node.js - 使用 node.js / react-native 的 Multer 不起作用

Question

我正在使用 react-native 创建一个应用程序，并且我正在使用图像选择器来选择图像并单击按钮来创建一个将图像发送到 node.js 服务器的部分。

但是在上传图片的过程中，其他的附加信息一般都保存在mysql中，而图片不保存在upload文件夹中。

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 });
    }
  };

标签： node.jsreact-nativeexpressaxiosmulter

Answer 1

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

改变：

db_img: req.body.file

到

db_img: req.file.path