、角度4とNodeJS

私はアプリを作成するためにマングース、エクスプレス、角度4とNodeJSを使用しています、と私は言語に非常に新しいです。私のコンポーネントの1つに、画像をアップロードしたいCRUDがあります。 Mongoose/MongoDBに保存した後、画面に画像を表示したい。、角度4とNodeJS

プラグインを使用する必要がありますか？もしそうなら、どちらですか？あなたは例を投稿できますか？

出典

2017-10-08 EdSparen

ファイルをサーバーにアップロードする場合は、npmで利用可能なnodej用のmulterモジュールを使用できます。

このサイトは非常に役に立ちます。 - https://www.terlici.com/2015/05/16/uploading-files-locally.html

また、mulooseとmongooseを使いたい場合は、この例も参考になります。

Image.js

const mongoose from 'mongoose' 
const Schema = mongoose.Schema 

const Image = new Schema({ 
    filename: { 
    type: String, 
    required: true 
    }, 
    originalname: { 
    type: String, 
    required: true 
    } 
}, {timestamps: true}) 

module.exports = mongoose.model('Image', Image)

server.js

// ... 
const app = express() 
const Image = require('./Image.js') 
const multer = require('multer') 
const path = require('path') 
const UPLOAD_PATH = path.resolve(__dirname, 'path/to/uploadedFiles') 
const upload = multer({ 
    dest: UPLOAD_PATH, 
    limits: {fileSize: 1000000, files: 5} 
}) 

// upload image 
app.post('/api/image', upload.array('image', 5), (req, res, next) => { 
    const images = req.files.map((file) => { 
    return { 
     filename: file.filename, 
     originalname: file.originalname 
    } 
    }) 
    Image.insertMany(images, (err, result) => { 
    if (err) return res.sendStatus(404) 
    res.json(result) 
    }) 
}) 

// get image with id 
app.get('/:id', (req, res, next) => { 
    Image.findOne({_id: req.params.id}, (err, image) => { 
    if (err) return res.sendStatus(404) 
    fs.createReadStream(path.resolve(UPLOAD_PATH, image.filename)).pipe(res) 
    }) 
}) 

// ...

client.js

// ... 
const axios = require('axios') 

function uploadImage() { 
    const files = document.getElementById('INPUT_TAG').files 
    const formData = new FormData() 
    formData.append('image', files[0]) 
    axios.post('YOUR_URL/api/image', formData) 
} 
// ...

upload.html

<body> 
    <input type="file" id="INPUT_TAG"/> 
    <button>call uploadImage() with angular/vue/react/etc</button> 
</body>

image.html

<body> 
    <img src="YOUR_URL/api/image/IMAGE_ID"> 
</body>

出典

2017-10-08 15:04:05

答えて

関連する問題