Блог

Все, чего я хочу добиться, это загрузить изображение в интерфейс react, сохранить его в локальной папке public / images в серверной части и отобразить загруженные изображения обратно во внешнем интерфейсе. До сих пор мне удавалось загружать файлы в серверную часть. Я не могу понять, как отображать файлы во внешнем интерфейсе. Я хочу сделать запрос get для отправки файлов изображений в интерфейс

экспресс-код: экспресс-изображение кода

 const express = require("express");
const multer = require("multer");
const cors = require("cors");

const app = express();


app.use(cors());
app.use(express.static("./public"));


var storage = multer.diskStorage({

destination: "./public/images",
filename: function (req, file, cb) {
cb(null, Date.now()   '-'  file.originalname )
}
})



var upload = multer({ storage: storage }).array('file');


app.post('/upload',function(req, res) {
 
upload(req, res, function (err) {
       if (err instanceof multer.MulterError) {
           return res.status(500).json(err)
       } else if (err) {
           return res.status(500).json(err)
       }
  return res.status(200).send(req.file)

})

});

const PORT = process.env.PORT || 5000;
app.listen(PORT, ()=> {
console.log("server started at port " PORT);
});
 

Код интерфейса React:

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

const ImageForm = () => {

const [file, setFile] = useState(null);


const handleFileChange = (event) => {
    setFile(event.target.files);
    console.log(file)
}


const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData();
    for(var x = 0; x<file.length; x  ) {
        data.append('file', file[x])
    }
    axios.post("http://localhost:5000/upload", data)
    .then(res => { 
        console.log(res.statusText)
      })
}

return ( 
    <div>
       <form >
        <div className="form-group" >

            <label htmlFor="file">Upload File:</label>
            <input 
            className="form-control-file mb-3" 
            type="file" id="file" 
            accept=".jpg"
            multiple
            onChange={handleFileChange}
            />

            <button 
            className="btn btn-primary mt-3" 
            onClick={handleSubmit}
            >Upload</button>
        </div>
       </form>

       {/* Display Image Here */}
    </div>
 );
}

export default ImageForm;
 

res: ответ

ошибка: ошибка

Во-первых, создайте состояние:

 const [imgFile, setImgFile] = useState('');
 

Затем замените следующую часть вашего кода:

 axios.post("http://localhost:5000/upload", data)
.then(res => { 
    setImgFile('http://localhost:5000/public/images/' res.data.filename)
  })
 

Добавьте это после тега формы

 <img src={imgFile} alt="img"/>
 

На всякий случай, если изображение не загружается, добавьте это в код express:

 app.use('/public/images', express.static(__dirname   '/public/images/'));