使用GridFS-Stream通过Axios将图像文件发送到前端React.js --将chunk转换为string base64

const fs = require('fs');
const axios = require('axios');
const Grid = require('gridfs-stream');
const mongoose = require('mongoose');

// 连接到MongoDB
mongoose.connect('mongodb://localhost/mydatabase');

// 创建GridFS存储对象
const conn = mongoose.connection;
Grid.mongo = mongoose.mongo;
const gfs = Grid(conn.db);

// 使用Axios获取图像文件并将其存储到GridFS中
axios({
  url: 'http://example.com/image.jpg',
  method: 'GET',
  responseType: 'stream'
})
  .then(response => {
    const writestream = gfs.createWriteStream({ filename: 'image.jpg' });
    response.data.pipe(writestream);
    writestream.on('close', () => {
      console.log('图像文件保存到GridFS成功');
    });
  })
  .catch(error => {
    console.log('获取图像文件失败:', error);
  });

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const ImageComponent = () => {
  const [imageSrc, setImageSrc] = useState('');

  useEffect(() => {
    // 使用Axios获取图像文件数据
    axios.get('http://example.com/api/getImage', { responseType: 'blob' })
      .then(response => {
        // 读取图像文件数据
        const reader = new FileReader();
        reader.onload = () => {
          const base64data = reader.result;
          setImageSrc(base64data);
        };
        reader.readAsDataURL(response.data);
      })
      .catch(error => {
        console.log('获取图像文件失败:', error);
      });
  }, []);

  return (
    <div>
      <img src={imageSrc} alt="图像" />
    </div>
  );
};

export default ImageComponent;