1、 题记
在我刚毕业的时候做了一个毕业设计,说实话这个毕业设计基本就是个玩具项目,不过它让我了解到很多除前端以外的东西,了解了前后端的开发的不同、数据是如何交互、数据库设计、密码加密等等,让我学习了很多,但是这整个项目只有表单数据的交互,没有文件上传,也就是二进制流的操作。那时面试了几个公司,其中一家公司看到了我的毕业设计,问了一下Node.js和express,好巧不巧的只问了关于文件上传的怎么实现,其他没咋问,很尴尬。
2、 功能实现
今天终于抽出时间去研究了一下这个问题,百度了很多,在这里找到了formidable这个npm包,然后根据文章进行了功能实现。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18router.post('/upload', function (req, res) {
const listenNumber = req.headers.referer//.match(/\d+/)[0];
var form = new formidable.IncomingForm();//既处理表单,又处理文件上传
//设置文件上传文件夹/路径,__dirname是一个常量,为当前路径
let uploadDir = path.resolve(__dirname, "../public");
form.uploadDir = uploadDir;//本地文件夹目录路径
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
let oldPath = files.file.path;//这里的路径是图片的本地路径
const fileName = files.file.name
let newPath = path.join(path.dirname(oldPath), fileName);
//这里我传回一个下载此图片的Url
var downUrl = listenNumber + "server/public/" + fileName;//这里是想传回图片的链接
fs.rename(oldPath, newPath, () => {//fs.rename重命名图片名称
res.send({ code: 50008, msg: { downUrl,fields, files } })
})
})
})
不过和文章里有点不同,1
2
3let oldPath = files.cover.path;//文章中的
let oldPath = files.file.path;//实际我写的
这里我猜是可能是因为formidable内部有变化了,最后还是实现了,下面是我的项目目录结构,方便大家对上述代码的文件路径的理解,这里我试了好几遍才成功。。。
上传成功之后的返参是这样的
1 | { |
3、 功能部署
代码部署相信大家都会,就是放到对应位置就行,这里的对应是指和nginx(我用的nginx)配置的路径相对应。
这里遇到了413 Request Entity Too Large,
- 可以选择在http{ }中设置:client_max_body_size 20m;
- 也可以选择在server{ }中设置:client_max_body_size 20m;
- 还可以选择在location{ }中设置:client_max_body_size 20m;
以为解决完上述问题上传就没问题了,但是预览图片1
http://student.bestzhengke.com/server/public/2GVVSPHJ61%7D(0OSJH969EFQ.jpg
的时候始终404,根据经验八成还是nginx配置出了问题,最后搜到了这篇文章,发现如下注解:
- 这个配置表示输入 localhost:8080/image/时会访问本机的/usr/local/static/image/ 目录(或G:\host\image\目录)
- 如果没有/usr/local/static/image/目录则需要新建/usr/local/static/image/目录
最后我在nginx加入如下配置:
1 | location /server/public/ { |
经过nginx转发之后就会变成这样/root/student/server/public/,刚好就对应着服务器中的文件所在的位置,于是就访问到了该资源。
4、 总结
在整个功能实现过程中,并没有遇到太多问题,大多数时间都是在调整这个文件的路径关系,也不知道为什么,感觉这个相对路径这么难。
在写这个文章的时候我还有一点疑惑,同样都是启动了express服务,在本地开发的时候能够根据返回的路径直接访问上传后的图片,为什么部署之后就还得通过nginx配置之后才能访问呢?或许这个问题就是因为nginx引起的,所以还要由nginx解决吧。