React应用上传文件至PostgreSQL失败：仅文件未存入且无报错

我用React开发的应用向PostgreSQL数据库上传数据时，除文件外所有字段都成功存入，但文件始终无法写入数据库，全程没有任何报错信息。以下是相关代码，请求帮忙排查问题：

相关代码 #

1. 文件输入组件 #

<input type="file" className="form-control" id="inputfile"
       aria-describedby="inputGroupFileAddon04"
       aria-label="Upload"
       onChange={(e) => setBonScanner(e.target.files[0])}
       required/>

2. 数据插入调用函数 #

ProcessService.ajouterBon(
    fk_fournisseur,
    acheteur,
    bonScanner,
    type_bon,
    recepteur,
    livreur
  ).then((res) => {
    console.log(res.data);
    setId_bon(res.data[0].id_bon);
  });

3. 前端请求发送代码 #

const PRODUIT_API_BON = "http://localhost:8080/process/ajouterBon"; 
class ProcessService { 
  ajouterBon(fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur){
    const bon = { fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur }
    return axios.post(PRODUIT_API_BON, bon)
  }
}

4. 后端Controller代码 #

ajouterBon = (req, res) => {
  var datee = new Date();
  var heure = HeureNow();
  var {scanne_bon} = req.files

  var data = upload.data
  console.log(data);

  // Deconstruct x to get response values
  res.send("OK")

  const { fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur } = req.body;
  pool.query(queries.ajouterReception,
    [fk_fournisseur, acheteur,scanne_bon, type_bon, datee, heure, recepteur, livreur],
    (error, result) => {
      if (error) throw error;
      res.status(200).json(result.rows);
    }, [data]);
};

5. SQL查询语句 #

const ajouterReception = "INSERT INTO bon ( fk_fournisseur, acheteur,scanne_bon, type_bon, datee, heure, recepteur, livreur ) VALUES ($1, $2, $3, $4, $5, $6, $7 , $8) RETURNING id_bon , recepteur , fk_fournisseur";

排查方向及修复方案 #

1. 前端未用FormData传输文件 #

当前端直接把文件对象放到普通JSON里发送时，axios无法正确传递文件内容，必须用FormData格式：

// 修改前端ProcessService的ajouterBon方法
ajouterBon(fk_fournisseur, acheteur, scanne_bon, type_bon, recepteur, livreur) {
  const formData = new FormData();
  formData.append('fk_fournisseur', fk_fournisseur);
  formData.append('acheteur', acheteur);
  formData.append('scanne_bon', scanne_bon);
  formData.append('type_bon', type_bon);
  formData.append('recepteur', recepteur);
  formData.append('livreur', livreur);
  
  return axios.post(PRODUIT_API_BON, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });
}

2. 后端代码逻辑严重错误 #

原后端代码存在多个致命问题：

• 提前执行了res.send("OK")，导致后续数据库插入代码根本不会运行
• 同时从req.files和req.body中获取scanne_bon，逻辑混乱
• 未正确处理文件内容

修复后的后端代码（假设使用multer作为文件上传中间件）：

const fs = require('fs');

ajouterBon = async (req, res) => {
  try {
    const datee = new Date();
    const heure = HeureNow();
    
    // 从multer获取上传的文件
    const scanneBonFile = req.files?.scanne_bon?.[0];
    if (!scanneBonFile) {
      return res.status(400).send("请上传文件");
    }
    
    // 读取文件二进制内容（如果要存入数据库）
    const fileBuffer = fs.readFileSync(scanneBonFile.path);
    
    // 从form-data获取其他字段
    const { fk_fournisseur, acheteur, type_bon, recepteur, livreur } = req.body;
    
    // 执行数据库插入
    const result = await pool.query(queries.ajouterReception, [
      fk_fournisseur,
      acheteur,
      fileBuffer, // 传入二进制数据
      type_bon,
      datee,
      heure,
      recepteur,
      livreur
    ]);
    
    res.status(200).json(result.rows);
  } catch (error) {
    console.error(error);
    res.status(500).send("服务器内部错误");
  }
};

3. 确认后端文件上传中间件配置 #

必须配置multer来接收文件，比如：

const multer = require('multer');
// 配置临时存储目录
const upload = multer({ dest: './temp-uploads/' });

// 在路由中使用中间件，指定接收字段名为scanne_bon
router.post('/process/ajouterBon', upload.fields([{ name: 'scanne_bon' }]), ajouterBon);

4. 检查数据库字段类型 #

确保PostgreSQL中bon表的scanne_bon字段类型为bytea，只有这个类型才能存储二进制文件内容。如果是varchar等文本类型，无法存入文件。

内容的提问来源于stack exchange，提问作者kerroumi fatima zohra