Блог

Главная - Вопросы по программированию - проблемы с использованием base64 с отображением изображения на стороне клиента

проблемы с использованием base64 с отображением изображения на стороне клиента

#javascript #node.js #reactjs #express

#javascript #node.js #reactjs #экспресс

Вопрос:

Я пытаюсь загрузить изображение и показать его на стороне клиента, используя base 64. Я успешно отправляю в mongodb, но не показываю изображение после его загрузки.

Моя теория: мне нужно иметь функцию setDefaultImage вне функции setGetBaseFile для исправления, чтобы иметь возможность видеть изображение на стороне клиента. когда я пытаюсь переместить его, я получаю сообщение «Ошибка: слишком много повторных рендерингов. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл. Единственный способ обойти эту ошибку, который я обнаружил, — переместить функцию обратно в родительскую функцию.

Ниже приведен мой код для image.js

 const mongoose = require("mongoose");
const Image = mongoose.model("gallery");
const express = require('express');
const ImageRouter = express.Router();
const DIR = './public/';

/*  upload image in base64 format, thereby, directly storing it in mongodb datanase
    along with images uploaded using firebase storage  */    

    ImageRouter.route("/uploadbase")
    .post((req, res, next) => {
        const newImage = new Image({
            imageName: req.body.imageName,
            imageData: req.body.imageData
        });

        newImage.save()
            .then((result) => {
                res.status(200).json({
                    success: true,
                    document: result
                });
            })
            .catch((err) => next(err));
    });

module.exports = ImageRouter;

Ниже приведен мой код на стороне клиента:

 import React, { useState } from "react";

import Container from "react-bootstrap/Container";
import Card from "react-bootstrap/Card";
// import Button from "react-bootstrap/Button";
// import "./postverse.css";
import Form from "react-bootstrap/Form";
import axios from "axios";

import FileBase from 'react-file-base64';
import DefaultImg from '../../assets/default-image.jpg';

const GlobalPost = () => {
  
  const API_URL = "http://localhost:5000";
  const [baseImage, UseBaseImage] = useState(DefaultImg);
  const [DefaultImage, setDefaultImage] = useState("");

// function to upload image once it has been captured
  setDefaultImage({
    baseImage: DefaultImg
  });

  // function to capture base64 format of an image
  function setGetBaseFile(files) {
    // create a local readable base64 instance of an image

    UseBaseImage({
      baseImage: files.base64
    });  

    let imageObj = {
      imageName: "base-image-"   Date.now(),
      imageData: files.base64.toString()
    };

    axios.post(`${API_URL}/image/uploadbase`, imageObj)
      .then((data) => {
        if (data.data.success) {
          alert("Image has been successfully uploaded using base64 format");
          UseBaseImage("base")
        }
      })
      .catch((err) => {
        alert("Error while uploading image using base64 format")
        UseBaseImage("base") 
      });
    }


  return (
    <div className="globalpost">
      <Container className="mt-5 ml-auto mr-auto">
        <h1 className="text-center">
          Post to
          <span className="text-success"> ShareVerse</span>
        </h1>
        <Form
          className="shadow p-3 mb-5 bg-white rounded"
          action="/search"
          method="post"
          encType="multipart/form-data"
        >
          <Form.Group controlId="formBasicVerse">
            <Form.Label><h5>Upload Image</h5></Form.Label>
            <FileBase type="file" 
                      multiple={false} 
                      onDone={setGetBaseFile} 
            />
            <Card.Img src={baseImage} alt="upload-image"></Card.Img>
          </Form.Group>
        </Form>
      </Container>
    </div>
  );
};

export default GlobalPost;

Ниже приведены мои данные mongoose.schema

 const mongoose = require("mongoose");

//create schema
const ImagesSchema = new mongoose.Schema({
  name: {
    type: String,
    default: "none",
    required: true
  },
  imageData: {
    // type: mongoose.Types.ObjectId,
    type: String,
    required: true,
  },
});

module.exports = mongoose.model("gallery", ImagesSchema);

Ниже мой app.js

 // file includes all app level config, middleware, and supporting libraries

const express = require("express"); //import express
const app = express(); //initalise app with express
const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const routes = require("./routes/DataRoutes");
const ImageRouter = require('./routes/image');


app.use(bodyParser.json());
//body-parser handles HTTP POST requests.
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
//enable Cross-Origin Resource Sharing.
app.use(cors());

app.use(express.json());
// get log details of our app if needed
app.use(logger("dev"));

//middleware to import routes
app.use('/image', ImageRouter);
app.use("/", routes);


app.use('/search', express.static('search'));

module.exports = app;