ファイルアップロード

こんにちは.
今日は簡単にどのようにファイルをアップロードする方法を説明します.すべての妥当性検査を省略して短くしてシンプルにします.
畝
畝

フロントエンド
畝
我々は、ボイラプレートとして作成反応アプリを使用します

mkdir imgUploadExample && cd imgUploadExample
npx install create-react-app frontend

畝
インストールが完了すると、我々はアプリを見る必要があります.フロントエンドフォルダのJSファイル.
まず最初に、我々は我々のイメージをアップロードすることができる単純な形をつくることから始めます.

return (
    <div className='App'>
      <h1>Upload to server</h1>
      {image.preview && <img src={image.preview} width='100' height='100' />}
      <hr></hr>
      <form onSubmit={handleSubmit}>
        <input type='file' name='file' onChange={handleFileChange}></input>
        <button type='submit'>Submit</button>
      </form>
      {status && <h4>{status}</h4>}
    </div>
  )

畝
つの関数を作成する必要があります
HandleFileChange -ファイルがアップロードされたときにトリガされ、画像のプレビューが表示されます.
handlesubmit -サーバーにイメージを送信しましょう.

 function App() {
  const [image, setImage] = useState({ preview: '', data: '' })
  const [status, setStatus] = useState('')
  const handleSubmit = async (e) => {
    e.preventDefault()
    let formData = new FormData()
    formData.append('file', image.data)
    const response = await fetch('http://localhost:5000/image', {
      method: 'POST',
      body: formData,
    })
    if (response) setStatus(response.statusText)
  }

  const handleFileChange = (e) => {
    const img = {
      preview: URL.createObjectURL(e.target.files[0]),
      data: e.target.files[0],
    }
    setImage(img)
  }

したら、我々は選択＆提出ボタンを使用してフォームを参照してくださいする必要がありますNPMの実行スタートとアプリを反応開始します.

バックエンド
ここで、イメージデータをフロントエンドから送信してポストリクエストを処理するノードアプリケーションを作成します.画像が受信されると、それは私たちの作業ディレクトリを保存します.
新しいディレクトリ実行コマンドを作成するには

mkdir backend && cd backend && mkdir images

それから、我々はNPM INITで我々のアプリケーションを初期化します
必要なパッケージをいくつかインストールします

npm install express cors multer

作業ディレクトリは次のようになります

├── backend
│   ├── app.js
│   ├── node_modules
|   ├── images
│   ├── package.json
│   └── package-lock.json
└── frontend
    ├── node_modules
    ├── package.json
    ├── public
    ├── README.md
    ├── src
    └── yarn.lock

Multerは私たちのフロントエンドフォームから送信されたmultipart/formデータを扱うことができるミドルウェアです.
Corsは、我々のフロントエンドからバックエンドへのクロス起源要求を受け入れさせます.

const express = require('express')
const app = express()
const port = 5000
const cors = require('cors')
const multer = require('multer')

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'images/')
  },
  filename: (req, file, cb) => {
    cb(null, file.originalname)
  },
})

const upload = multer({ storage: storage })

app.use(cors())

app.post('/image', upload.single('file'), function (req, res) {
  res.json({})
})

app.listen(port, () => {
  console.log(`listening at http://localhost:${port}`)
})

我々は、元のファイル名を使用してバックエンド/画像で保存されるマルチイメージを初期化、初期化された画像を初期化.
バックエンドを開始する

 node app.js

フロントエンドに行き、画像をアップロードします.

読んでくれてありがとう
Github repo