上传图片并在页面上显示该图片（Node.js，React，js，Express.js）

Question

我需要将图片上传到网站，并在上传后将其显示在网页上，并显示文件名的标题在形象下。我搜索了很多关于上传和显示在同一页面上的很多教程，但我认为我只理解了从服务器请求信息并将其显示回来的内容。

我正在编写我的web应用程序在node + react中，并使用express和multer作为文件IO。这里是我的代码：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Dropzone from 'react-dropzone-component'; 
import fs from 'fs'; 
import express from 'express'; 
import mutler from 'mutler'; 

var app = express(); 
var storage; 
var upload; 

export default class Form extends React.Component { 
constructor (props) { 
    super(props); 
    storage = multer.diskStorage({ 
     //file destination 
     destination: function (req, file, callback) { 
      callback(null, '/uploads/'); 
     }, 
     //set the filename 
     filename: function (req, file, callback) { 
      callback(null, file.originalname); 
      this.state = { 
       name: file.originalname 
      }; 
     } 
    }); 
    upload = multer({ storage : storage}).single('userImage'); 
    app.use('/uploads/', express.static(__dirname + '/uploads/')); 
} 

handleImageUpload() { 
    app.post('/', function (req, res) { 
     fs.readFile(req.files.userImage.path, function(err, data) { 
      console.log('error with ' + data); 
     }); 
     upload(req, res, function (err) { 
      if (err) { 
       return res.end("Error uploading file."); 
      } 

      res.writeFile("/uploads/" + origName, new Buffer(req.body.photo, "base64"), function(err) { 
       console.log("error writing image"); 
      }); 
      res.redirect('/'); 
     }); 
    }); 
} 

getName() { 
    return this.state.name; 
} 

render() { 
    return (<div> 
     <form action="/" method="post" enctype="multipart/form-data"> 
      <input type="image" name="userImage"/> 
      <input type="submit" name="submit" value="submit" onClick={this.handleImageUpload.bind(this)}/> 
     </form> 
    </div> 

    ); 
} 

} 

我试过以下多个教程（这就是为什么悬浮窗是进口的），但我实在不明白这一点的是我想做的事情。

我想如果我在构造函数中将文件名保存为状态，那么我可以稍后获取它并将其显示在另一个文件中，该文件只是将文件的url归属到较高的反应文件中的图像源。

我的问题是：我哪里出错了？按照我的理由，这应该可以工作，但我是新来的IO节点，并且我看过的教程中的许多人似乎都是常识，并不是单击我。预先感谢您的帮助！

Answer 1

使用以下模块选择图像。
https://www.npmjs.com/package/react-image-uploader

然后，您可以使用xhr请求将图像上传到服务器。以下是示例代码。

var xhr = new XMLHttpRequest(); 
xhr.onload = function (e) { 
//your success code goes here 
} 
var formData = new FormData(); 
xhr.open("POST", url, true); 
formData.append('file', fileData); 
xhr.send(formData); 

我假设你正在实施下列要求。

1. 允许用户选择图像。
2. 上传所选图像
3. 将所选图像显示给用户。

什么我的解决方案将帮助

1. 允许用户选择图像，他/她选择什么
2. 显示用户。
3. 通过可用回调将图像上传到服务器（教程中提到）
4. 显示成功或失败。

如果您需要任何帮助，请告诉我。 :)