Javascript 使用react和express后端预览上载的图像时损坏图像

上传工作正常。但我无法访问图像进行预览

class uploadMyFile extends React.Component {
    constructor(props) {
    super(props);
    this.state ={
        file: null,
        fileUrl:null
    };
    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}
onFormSubmit(e){
    e.preventDefault();
    const formData = new FormData();
    formData.append('myImage',this.state.file);
    const config = {
        headers: {
            'content-type': 'multipart/form-data'
        }
    };
    axios.post("/upload",formData,config)
        .then((response) => {
            alert("The file is successfully uploaded");
            console.log(response.data.results.path);
            this.setState({fileUrl:response.data.results.path})
        }).catch((error) => {
    });
}
onChange(e) {
    this.setState({file:e.target.files[0]});
}

render() {
    return (
        <div id="App">
        <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />
        <div id="page-wrap" >
        <div >
            </div></div>
        <div style={{marginTop:"100px"}}>
        <form onSubmit={this.onFormSubmit}>
            <h1>File Upload</h1>
            <input type="file" name="myImage" onChange= {this.onChange} />
            <button type="submit">Upload</button>
            <img src= {this.state.fileUrl}/>
        </form></div></div>
    )}} export default uploadMyFile

    app.use(express.static(path.join(__dirname, 'newapp/public')));
    app.get('*', (req,res) =>{
    res.sendFile(path.join(__dirname+'/newapp/public/index.html'));
    });
    const storage = multer.diskStorage({
    destination: "./public/uploads/",
    filename: function(req, file, cb){
    cb(null,"IMAGE-" + Date.now() + path.extname(file.originalname));
    } });
    const upload = multer({
    storage: storage,
    limits:{fileSize: 1000000},
    }).single("myImage");

    app.post('/upload', function (req, res) {
    upload(req, res, function (err) {
    console.log("Request ---", req.body);
    console.log("Request file ---", req.file);//Here you get file.
    /*Now do where ever you want to do*/
    if(!err) {
    return res.status(200).json({
            results:req.file
        });
    }
    })
    })

类uploadMyFile扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
文件：null，
fileUrl:null
};
this.onFormSubmit=this.onFormSubmit.bind（this）；
this.onChange=this.onChange.bind（this）；
}
onFormSubmit（e）{
e、 预防默认值（）；
const formData=new formData（）；
append（'myImage'，this.state.file）；
常量配置={
标题：{
“内容类型”：“多部分/表单数据”
}
};
post（“/upload”，formData，config）
。然后（（响应）=>{
警报（“文件已成功上载”）；
log（response.data.results.path）；
this.setState（{fileUrl:response.data.results.path}）
}).catch（（错误）=>{
});
}
onChange（e）{
this.setState（{file:e.target.files[0]}）；
}
render（）{
返回(
文件上传
上传
)}}导出默认uploadMyFile
app.use（express.static（path.join（'newapp/public'））；
应用程序获取（“*”，（请求，请求）=>{
res.sendFile（path.join（uuu dirname+'/newapp/public/index.html'）；
});
const storage=multer.diskStorage({
目的地：“./public/uploads/”，
文件名：函数（请求、文件、cb）{
cb（null，“IMAGE-”+Date.now（）+path.extname（file.originalname））；
} });
const upload=multer({
存储：存储，
限制：{文件大小：1000000}，
}).单一（“myImage”）；
app.post（'/upload'，函数（req，res）{
上传（请求、恢复、功能（错误）{
日志（“请求---”，请求主体）；
console.log（“请求文件----”，req.file）；//这里是文件。
/*现在去你想去的地方*/
如果（！err）{
返回res.status（200）.json({
结果：req.file
});
}
})
})

服务器端错误：

错误：enoint:没有这样的文件或目录，stat'C:\Users\Weboffice PC 2\React\React express example\newapp\build\index.html'

控制台上的错误：

得到404 （未找到）

---

您是否在/public/uploads/folder中获取图像？？？我的服务器端应用程序是react express example。我在react express example/public/uploads中找到图像您的根目录中是否有任何public/uploads/folders？正如我所说，我的后端应用程序是react express example，我的前端应用程序是newapp。我在react-express-example中有一个目录。不在newapp中。请在app之前在server.js中执行console.log（path.join（uu dirname，'newapp/build'）。使用（express.static（path.join（……..）并检查输出，给出前端构建/index.html的正确路径