/ / Jak wgrać / zapisać i wyświetlać zdjęcia za pomocą Mongoose, Express, Angular 4 i NodeJS - node.js, kątowe, ekspresowe, mangusta

Jak przesyłać / zapisywać i wyświetlać zdjęcia za pomocą Mongoose, Express, Angular 4 i NodeJS - node.js, kątowe, ekspresowe, mangusta

Używam Mongoose, Express, Kątowy 4 i NodeJS, aby utworzyć aplikację i jestem całkiem nowydo języka. W jednym z moich komponentów mam CRUD, który chciałbym załadować zdjęcie. Po zapisaniu go na Mongoose / MongoDB, chcę pokazać obraz na ekranie.

Czy powinienem użyć wtyczki? Jeśli tak, to jaki? Czy możesz wysłać przykład?

Odpowiedzi:

2 dla odpowiedzi № 1

Jeśli chcesz przesłać plik na serwer, możesz użyć modułu multer dla nodejs, który jest dostępny z npm.

Ta strona będzie dla Ciebie bardzo pomocna. - https://www.terlici.com/2015/05/16/uploading-files-locally.html

A jeśli chcesz użyć multera z mangustą, ten przykład również będzie pomocny.

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="/images/YOUR_URL/api/image/IMAGE_ID">
</body>