从反应前端上传图像到表达后端并在前端显示

Question

我想要实现的是在反应前端上传图片，将其保存在后端的本地public/images文件夹中，并在前端显示上传的图片。到目前为止，我已经设法将文件上传到后端。我不知道如何在前端显示文件。我想发出获取请求以将图像文件发送到前端

快递编码： express code image

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;

结果：response

错误：err

Answer 1

首先，创建一个状态：

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"/>

以防万一图片无法加载，请在快递代码中添加：

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

从反应前端上传图像到表达后端并在前端显示

uploading image from react frontend to express backend and displaying it back in the frontend

file-upload

node.js

express

reactjs

multer