{"id":5580,"date":"2022-11-09T17:41:35","date_gmt":"2022-11-09T08:41:35","guid":{"rendered":"https:\/\/kumapress.com\/?p=5580"},"modified":"2022-11-09T17:42:17","modified_gmt":"2022-11-09T08:42:17","slug":"reactnodejsaxios%e3%81%a7%e7%94%bb%e5%83%8f%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%92%e3%82%a2%e3%83%83%e3%83%97%e3%83%ad%e3%83%bc%e3%83%89%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/kumapress.com\/?p=5580","title":{"rendered":"React+Nodejs+axios\u3067\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b"},"content":{"rendered":"\n

React\u3067\u958b\u767a\u3092\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u753b\u50cf\u30d5\u30a1\u30a4\u30eb\u3092Nodejs\u30b5\u30fc\u30d0\u30fc\u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3059\u308b\u306b\u306f\u3069\u3046\u3059\u308b\u304b\u3002
\u7d50\u5c40\u306f\u3001Form\u3092\u4f5c\u6210\u3057\u3066\u3001append\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u306a\u3088\u3046\u3067\u3059(^^;
\u203b\u3053\u308c\u306f\u300cFile upload with React & NodeJS\u300d<\/a>\u3092\u53c2\u8003\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210<\/h3>\n\n\n

\u4eca\u56de\u306f\u3053\u3093\u306a\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u306b\u3057\u307e\u3059\u3002<\/p>\n

dev
\u3000frontend —- React\u74b0\u5883
\u3000backend —- Nodejs\u74b0\u5883
\u3000\u3000images — \u753b\u50cf\u4fdd\u5b58\u9818\u57df<\/p>\n\n\n

\u30d5\u30ed\u30f3\u30c8\u5074(React)\u306e\u69cb\u7bc9<\/h3>\n\n\n

\u30fbReact\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002
$ npx create-react-app frontend<\/p>\n

\u30fbaxios\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002
\uff04 npm install axios –save<\/p>\n

\u30fbApp.js\u3092\u66f8\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n\n\n

import '.\/App.css';\nimport React, { useState, useEffect  } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n    const [image, setImage] = useState({ preview: '', data: '' })\n    const [status, setStatus] = useState('')\n    const handleSubmit = async (e) => {\n        e.preventDefault();\n        let formData = new FormData();\n        try {\n            formData.append('file1', image.data);\n            const res = axios.post( 'http:\/\/localhost:5000\/image', formData );\n        } catch( error ) {\n            setStatus( error )\n        }\n    }\n\n    const handleFileChange = (e) => {\n        const img = {\n            preview: URL.createObjectURL(e.target.files[0]),\n            data: e.target.files[0],\n        }\n        setImage(img)\n    }\n\n    return (\n        <div className=\"App\">\n            <h1>Upload to server<\/h1>\n            {image.preview && <img src={image.preview} width='100' height='100' \/>}\n            <hr><\/hr>\n            <form onSubmit={handleSubmit}>\n                <input type='file' name='file' onChange={handleFileChange}><\/input>\n                <button type='submit'>Submit<\/button>\n            <\/form>\n            {status && <h4>{status}<\/h4>}\n        <\/div>\n    );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
\u30fb\u8d77\u52d5\u3057\u307e\u3059\u3002
$ npm start<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
\u753b\u50cf\u3092\u9078\u629e\u3059\u308b\u3068\u3053\u3093\u306a\u611f\u3058\u3002\u3002<\/p>\n\n\n
\"\"<\/figure>\n\n\n\n
\u30b5\u30fc\u30d0\u30fc\u5074(Nodejs)\u306e\u69cb\u7bc9<\/h3>\n\n\n\n
\u30fb\u30b5\u30fc\u30d0\u30fc\u74b0\u5883\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002
$ npm install express cors multer<\/p>\n
\u30fbapp.js\u3092\u66f8\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n\n\n\n
const express = require('express')\nconst app = express()\nconst port = 5000\nconst cors = require('cors')\nconst multer = require('multer')\n\nconst storage = multer.diskStorage({\n    destination: (req, file, cb) => {\n        cb(null, 'images\/')\n    },\n    filename: (req, file, cb) => {\n        cb(null, file.originalname)\n    },\n})\n\nconst upload = multer({ storage: storage })\n\napp.use(cors())\n\napp.post('\/image', upload.single('file1'), function (req, res) {\n    console.log( \"req.file.filename    :\" + req.file.filename );\n    console.log( \"req.file.originalname:\" + req.file.originalname );\n    console.log( \"req.file.mimetype    :\" + req.file.mimetype );\n    res.json({})\n})\n\napp.listen(port, () => {\n  console.log(`listening at http:\/\/localhost:${port}`)\n})<\/code><\/pre>\n\n\n
\u30fb\u8d77\u52d5\u3057\u307e\u3059\u3002
$ node app.js<\/p>\n\n\n
\u78ba\u8a8d\u3057\u307e\u3059<\/h3>\n\n\n
\u30d5\u30a1\u30a4\u30eb\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044(^^)<\/p>