扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下Express系列之multer上传的用法示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事成都网站制作、网站设计、外贸网站建设、企业网站建设、成都手机网站制作、网页设计、成都品牌网站建设、网页制作、做网站、建网站。创新互联拥有实力坚强的技术研发团队及素养的视觉设计专才。主要说一下multer,我并没有实现所有的功能,只是实现单图片上传这一个功能,其他的再摸索喽。
这是文件的整个目录,主要就两个,一个是根目录下的main.js,还有一个是public/index.html。
放代码:
//main.js let express = require('express'); var multer = require('multer') var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'public/'); }, filename: function (req, file, cb) { cb(null, Date.now() + '.png'); } }) var upload = multer({ storage: storage }) //var upload = multer({ dest: 'public/' }) let app = express() app.use(express.static('public')) app.post('/public/index.html',upload.single('myfile'),(req,res,next)=>{ console.log(req.file) res.send(req.file) }) app.listen(3300,'127.0.0.1')
Document
不想引用jquery库,我就原生写的ajax,总的来说应该没什么难的,总之就是点击按钮选择完图片之后,会将图片的信息放在一个键名为myfile
的对象中,传给后台。
express把接受到的图片存储在/public/
文件下,这里有个小小的坑。可以看到我在main.js
注释了这样一行代码:
var upload = multer({ dest: 'public/' })
其实最开始的时候我用的就是这一行代码,dest
的意思是选择一个路径去存储文件,但是这样写有一个小小的问题,存入进来的文件是没有后缀名的。
我在向前台返回数据的时候
res.send(req.file)
这个问题就很严重,比如一个场景是我上传一张图片做头像,但是等我下次进入自己的个人页面,后台给我返回的数据没有办法作为图片的地址使用,这就很麻烦了。所以在网上找了一个原因,就把上面的代码注释换成了这个:
var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'public/'); }, filename: function (req, file, cb) { cb(null, Date.now() + '.png'); } }) var upload = multer({ storage: storage })
destination
是文件存储的地址,filename
设置的是文件的名字,那在这里如果写成这种:
filename: function (req, file, cb) { cb(null, file.fieldname + '.png'); }
你会发现你传入的每一张图片的名字都是myfile.png
,新的覆盖旧的。所以为了能保存传入的所有图片,我就使用Date.now()作为每张图片不同的识别符,这样就不会再出现覆盖的情况。
以上是“Express系列之multer上传的用法示例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流