이미지 업로드 및 페이지 (Node.js, React, js, Express.js)에 해당 이미지 표시

Question

파일 이름과 함께 업로드 한 후 이미지를 사이트에 업로드하고 페이지에 표시해야합니다. 이미지 아래. 나는 모든 것을 검색했고 동일한 페이지에서 업로드하고 표시하는 것에 대한 자습서를 많이 찾았지만 서버로부터 정보를 요청한 다음 다시 표시하는 것에 대한 내 이해가 붕괴 된 것 같습니다.

나는 node + react에서 웹 응용 프로그램을 작성하고 파일 IO에 express와 multer를 사용하고 있습니다. 여기 내 코드입니다 :

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> 

    ); 
} 

} 

I했습니다 시도 여러 자습서를 다음 (DROPZONE을 가져온 이유입니다)하지만 난 그냥 내가하고 싶은 것을 위해이 알아낼 수 없습니다.

파일 이름을 생성자에 저장하면 그 파일을 나중에 가져 와서 다른 파일에 표시 할 수 있다는 것을 알았습니다.이 파일은 파일의 URL을 상위 파일의 이미지 소스에 간단히 표시합니다.

내 질문은 이것입니다. 어디서 잘못 읽었습니까? 내 논리에 따르면 이것은 잘 작동하지만 노드를 IO로 사용하는 데 익숙하지 않으며 읽은 튜토리얼에서 많은 사람들에게 공통적으로 나타나는 지식은 나와 함께 클릭하지 않는 것입니다. 당신의 도움에 미리 감사드립니다!

Answer 1

다음 모듈을 사용하여 이미지를 선택하십시오.

그러면 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. 표시 사용자가 선택할 수 있도록 도움이 될 것입니다 무엇

   .

4. 사용할 수있는 콜백으로 서버에 이미지 업로드 (자습서에서 언급)
5. 성공 또는 실패 표시.

도움이 필요하면 알려주십시오. :)