使用express+multer实现node中的图片上传功能

使用express+multer实现node中的图片上传功能

下文给大家介绍使用express+multer实现node中的图片上传功能，具体内容介绍如下所示：

在前端中，我们使用ajax来异步上传图片,使用file-input来上传图片，使用formdata对象来处理图片数据，post到服务器中

在node中使用multer中间件来对上传路由接口进行处理

multer文档

package.json

html部分

File input:

提交

js部分

NodeJS逻辑代码

const http = require('http')

const path = require('path')

const express = require('express')

//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件

//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md

const multer = require('multer')

const app = express()

//配置express的静态目录

app.use(express.static(path.join(__dirname, 'public')));

app.get('/',(req,res)=>{

res.sendFile(__dirname+'/index.html')

})

//配置diskStorage来控制文件存储的位置以及文件名字等

var storage = multer.diskStorage({

//确定图片存储的位置

destination: function (req, file, cb){

cb(null, './public/uploadImgs')

},


//确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突

filename: function (req, file, cb){

cb(null, Date.now()+file.originalname)

}

});

//生成的专门处理上传的一个工具，可以传入storage、limits等配置

var upload = multer({storage: storage});

//接收上传图片请求的接口

app.post('/upload', upload.single('file'), function (req, res, next) {

//图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）

//线上的也就是服务器中的图片的绝对地址

var url = '/uploadImgs/' + req.file.filename

res.json({

code : 200,

data : url

})

});

http.createServer(app).listen(3000,()http://=>{

console.log('server is listening')

})

自我感觉良好，不知道博客园为什么要给我移除首页....

再发一次，if(delete){

alert('Never publish anything again.')

}else{

alert(1)

}

总结

以上所述是给大家介绍的使用express+multer实现node中的图片上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。