如何用猫鼬、快车、角4和NodeJS上传、保存和显示图片
如何用猫鼬、快车、角4和NodeJS上传、保存和显示图片
提问于 2017-10-08 13:59:55
我正在使用猫鼬，速成，角4和NodeJS创建一个应用程序，我是相当新的语言。在我的一个组件中，我有一个CRUD，我想上传一张图片。将其保存到Mongoose/MongoDB后，我想在屏幕上显示图片。
我应该使用插件吗？如果是，是哪一个？你能举个例子吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-08 15:04:05
如果您想上传文件到服务器，您可以使用multer模块的nodejs，这是可用的npm。
这个网站将对你很有帮助。- https://www.terlici.com/2015/05/16/uploading-files-locally.html
而且，如果你想用穆特和猫鼬，这个例子也是有帮助的。
Image.js
import 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46631906
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号