/ / मोंगोस, एक्सप्रेस, एंगुलर 4 और नोडजेएस - नोड.जेएस, कोणीय, एक्सप्रेस, मोंगोज़ के साथ चित्र अपलोड / सहेजने और दिखाने के लिए कैसे करें

मोंगोस, एक्सप्रेस, एंगुलर 4 और नोडजेएस - नोड.जेएस, कोणीय, एक्सप्रेस, मोंगोज़ के साथ चित्र अपलोड / सहेजने और दिखाने के लिए कैसे करें

मैं मोंगोस, एक्सप्रेस का उपयोग कर रहा हूं, कोणीय 4 और एक ऐप बनाने के लिए नोडजेएस, और मैं काफी नया हूंभाषा के लिए। मेरे घटकों में से एक में मेरे पास एक सीआरयूडी है कि मैं एक तस्वीर अपलोड करना चाहता हूं। इसे मोंगोस / मोंगोडीबी में सहेजने के बाद, मैं स्क्रीन पर तस्वीर दिखाना चाहता हूं।

क्या मुझे प्लगइन का उपयोग करना चाहिए? यदि हां, तो कौन सा? क्या आप एक उदाहरण पोस्ट कर सकते हैं?

उत्तर:

जवाब के लिए 2 № 1

यदि आप सर्वर पर फ़ाइल अपलोड करना चाहते हैं, तो आप nodejs के लिए multer मॉड्यूल का उपयोग कर सकते हैं जो npm के साथ उपलब्ध है।

यह साइट आपके लिए बहुत उपयोगी होगी। - https://www.terlici.com/2015/05/16/uploading-files-locally.html

और, यदि आप मोंगोज़ के साथ मल्टर का उपयोग करना चाहते हैं, तो यह उदाहरण भी सहायक होगा।

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>