MongoDB存储Base64图片字符串失败及500错误求助

我想把图片以字符串形式存储到MongoDB中，尝试直接存储图片时，MongoDB的imageurl字段始终为空；改为将图片转为Base64格式存储后，提交数据时字符串未被保存，修改代码后又出现500内部服务器错误。

相关代码 #

server.js #

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');
require('dotenv').config();
const { Buffer } = require('buffer');


const app = express();
const port = 5000;

// connect to MongoDB
mongoose.connect(process.env.DATABASE,{
  useNewUrlParser: true,
  useUnifiedTopology: true
}).then(() => console.log('DB Connected'));

// import the Candidate model
const Candidate = require('./candidate');

// use middleware
app.use(bodyParser.json());
app.use(cors());

// create a route for adding a candidate
app.post('/api/addcandidate', async (req, res) => {
  const { candidate_name, party_name, imageURL } = req.body;
  try {
    if (!imageURL) {
      throw new Error('Image URL is required');
    }
    const candidate = new Candidate({
      candidate_name,
      party_name,
      imageURL: Buffer.from(imageURL.split(",")[1], "base64").toString(),
    });
    await candidate.save();
    res.status(201).json({ message: 'Candidate added successfully' });
  } catch (error) {
    console.error(error);
    res.status(500).json({ message: 'Failed to add candidate' });
  }
});

app.get('/api/candidates', async (req, res) => {
  try {
    const candidates = await Candidate.find();
    res.status(200).json(candidates);
  } catch (error) {
    res.status(500).json({ message: 'Failed to get candidates' });
  }
});


// start the server
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

add.js #

const [data, setData] = useState({ candidate_name: "", party_name: "",  imageURL:"" });
const [error, setError] = useState("");

const handleChange = (event) => {
  if (event.target.name === "imageURL") {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      setData({ ...data, [event.target.name]: reader.result });
    };
  } else {
    setData({ ...data, [event.target.name]: event.target.value });
  }
};


const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const url = "http://localhost:5000/api/addcandidate";
    const { data: res } = await axios.post(url, data);
    localStorage.setItem("access_token", res.data);
    window.location = "/";
  } catch (error) {
    if (
      error.response &&
      error.response.status >= 400 &&
      error.response.status <= 500
    ) {
      setError(error.response.data.message);
    }
  }
};


return (
  <Container>
    <Logo>
      <img src="./amazon_logo.png" alt="" />
    </Logo>

    <FormContainer >
      <h3>Add Candidate</h3>

    
        />
      </InputContainer>

      <InputContainer>
        <p>ImageURL</p>
           <FileBase64
           type="file"
           multiple={false}
           onChange={handleChange}
           value={data.imageURL}
         />
        
      </InputContainer>

      <Button onClick={handleSubmit}>Add Candidate</Button>
    </FormContainer>
  </Container>
);
}

1. 前端FileBase64组件事件不匹配 #

你使用了FileBase64组件，但handleChange函数是按原生input事件逻辑编写的，而FileBase64的onChange回调返回的是包含base64字段的对象，不是原生事件对象，导致无法正确捕获Base64值，最终提交时imageURL为空触发后端错误。

修复前端handleChange：

const handleChange = (fileData) => {
  // 处理FileBase64组件的回调
  if (fileData.base64) {
    setData(prev => ({ ...prev, imageURL: fileData.base64 }));
  } else {
    // 处理普通输入框的情况
    const { name, value } = fileData.target;
    setData(prev => ({ ...prev, [name]: value }));
  }
};

同时给FileBase64组件添加name属性：

<FileBase64
  name="imageURL"
  type="file"
  multiple={false}
  onChange={handleChange}
  value={data.imageURL}
/>

2. 后端Base64处理逻辑错误 #

当前代码将Base64解码后转成普通字符串，会导致二进制数据乱码；同时如果Candidate模型中imageURL字段类型不匹配，也会导致存储失败。

修复后端逻辑：

• 若要存储Base64字符串，直接保存前端传来的完整值即可：

const candidate = new Candidate({
  candidate_name,
  party_name,
  imageURL: imageURL, // 直接存储完整Base64字符串
});

• 若要存储二进制数据，保留解码逻辑但改用Buffer类型，同时确保模型字段类型正确：

// candidate.js模型文件示例
const mongoose = require('mongoose');
const candidateSchema = new mongoose.Schema({
  candidate_name: String,
  party_name: String,
  imageURL: mongoose.Schema.Types.Buffer // 定义为Buffer类型
});
module.exports = mongoose.model('Candidate', candidateSchema);

后端存储代码调整为：

imageURL: Buffer.from(imageURL.split(",")[1], "base64"),

3. 增强后端错误调试 #

当前后端只返回模糊错误信息，建议打印完整错误栈便于排查：

catch (error) {
  console.error('详细错误:', error.stack);
  res.status(500).json({ message: 'Failed to add candidate', error: error.message });
}

4. 移除前端冗余操作 #

前端提交后执行的localStorage.setItem("access_token", res.data)无意义，因为后端返回的res中没有data字段，建议删除该行代码。

内容的提问来源于stack exchange，提问作者Kavy Bhavsar