当前位置:Gxlcms > JavaScript > nodejs+express做出文件上传

nodejs+express做出文件上传

时间:2021-07-01 10:21:17 帮助过:15人阅读

这次给大家带来nodejs+express做出文件上传,nodejs+express做出文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。

本文实例讲述了nodejs基于express实现文件上传的方法。分享给大家供大家参考,具体如下:

前段时间在做个人项目的时候,用到了nodejs服务端上传文件,现在回头把这个小结一下,作为记录。

本人上传文件时是基于express的multiparty ,当然也可以使用connect-multiparty中间件实现,但官方似乎不推荐使用connect-multiparty中间件。废话不多说,下面看代码吧。

步骤:

(1)使用express创建项目,默认使用的是jade模板引擎,但是还是习惯于html,所以就改为html模板。
(2)在项目目录中,通过npm install multiparty进行安装必要组件。
(3)修改views/index.html,添加一个文件上传的form。

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>上传文件</title>
  6. </head>
  7. <body>
  8. 上传文件
  9. <form method='post', action='/file/uploading', enctype='multipart/form-data'>
  10. <input type="file" name="inputFile">
  11. <input type="submit" value="上传">
  12. </form>
  13. </body>
  14. </html>

(4)修改routes/index.js,实现上传页面和上传响应的后台代码。

  1. var express = require('express');
  2. var router = express.Router();
  3. var multiparty = require('multiparty');
  4. var util = require('util');
  5. var fs = require('fs');
  6. /* 上传页面. */
  7. router.get('/', function(req, res, next) {
  8. //res.render('./views/index');
  9. res.sendfile('./views/index.html');
  10. });
  11. /* 上传 */
  12. router.post('/file/uploading', function(req, res, next) {
  13. /* 生成multiparty对象,并配置上传目标路径 */
  14. var form = new multiparty.Form();
  15. /* 设置编辑 */
  16. form.encoding = 'utf-8';
  17. //设置文件存储路劲
  18. form.uploadDir = './public/files';
  19. //设置文件大小限制
  20. form.maxFilesSize = 2 * 1024 * 1024;
  21. // form.maxFields = 1000; //设置所有文件的大小总和
  22. //上传后处理
  23. form.parse(req, function(err, fields, files) {
  24. var filesTemp = JSON.stringify(files, null, 2);
  25. if(err) {
  26. console.log('parse error:' + err);
  27. }else {
  28. console.log('parse files:' + filesTemp);
  29. var inputFile = files.inputFile[0];
  30. var uploadedPath = inputFile.path;
  31. var dstPath = './public/files' + inputFile.originalFilename;
  32. //重命名为真实文件名
  33. fs.rename(uploadedPath, dstPath, function(err) {
  34. if(err) {
  35. console.log('rename error:' + err);
  36. }else {
  37. console.log('rename ok');
  38. }
  39. })
  40. }
  41. res.writeHead(200, {'content-type': 'text/plain;charset=utf-8'});
  42. res.write('received upload:\n\n');
  43. res.end(util.inspect({fields: fields, files: filesTemp}))
  44. })
  45. })
  46. module.exports = router;

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

ip无法访问vue+webpack+myproject项目如何处理

vue-cli+webpack无法新建项目

preload()函数与图片上传使用

以上就是nodejs+express做出文件上传的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行