从 express nodejs 转换图像缓冲区类型 toString('encode64') 并保存在 mongodb答案

【问题标题】：Convert image buffer type toString('encode64') from express nodejs and save in mongodb从 express nodejs 转换图像缓冲区类型 toString('encode64') 并保存在 mongodb
【发布时间】：2022-07-19 18:53:47
【问题描述】：

通过 react 我恢复了一个缓冲区，该缓冲区已经通过 expressJS 使用 multer 保存在 mongodb 中，并将其转换为 base64 以将其显示为图像，它工作正常。

 axios
      .get("http://localhost:5000")
      .then((res) => setData(res.data))
      .catch((err) => console.log(err, "it has an error"));
  }


 data.map((singleData) => {
       // const base64String =btoa(String.fromCharCode.apply(null, new Uint8Array(singleData.img.data.data)));
       const Stringbuffer = new Buffer(singleData.img.data.data).toString("base64");
       console.log(singleData);
   
        return <img src={`data:image/png;base64,${Stringbuffer}`} alt="profile" width="300"/>
      }

现在我想将图像保存为来自服务器的 base64 字符串，以便通过在服务器而不是前端使用 new Buffer().toString('base64') 将其检索为 base64 字符串，但是当我在来自服务器的控制台它似乎不是像反应控制台那样的缓冲区对象。

这是前端控制台

[![在此处输入图片描述][2]][2]

这是后端控制台 [2]：https://i.stack.imgur.com/825CU.jpg

这是我的后端代码：

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "uploads/");
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage: storage });

app.use(cors())
app.post("/", upload.single("file"), (req, res) => {
 const binaryData = fs.readFileSync("uploads/" + req.file.filename);
 var base64data = Buffer.from(binaryData, 'binary').toString('base64');
 
  //console.log(base64data)
  const saveImage =  imageModel({
    img: {
      data: fs.readFileSync("uploads/" + req.file.filename),
      image: base64data,
      contentType: "image/png",
    },
  });
  saveImage
    .save()
    .then((res) => {
      console.log("image is saved");
    })
    .catch((err) => {
      console.log(err, "error has occur");
    });
    res.send('image is saved')
});


app.get('/',async (req,res)=>{
  const allData = await imageModel.find()
  console.log(allData);
  res.json(allData)
})

【问题讨论】：

标签： node.js reactjs express multer

【解决方案1】：

我想通过使用 new Buffer() 来保存从服务器上传的图像（如 base64 字符串）以直接显示该图像，而无需使用 data:image/png;base64,${Stringbuffer}}

在前端执行 new Buffer()

【讨论】：