Express系列之multer上传的使用(2)
不想引用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()作为每张图片不同的识别符,这样就不会再出现覆盖的情况。
目前就这样,下次弄出来了多图片上传我再接着更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。