上傳圖片並在頁面上顯示該圖片（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. 顯示成功或失敗。

如果您需要任何幫助，請告訴我。 :)