[关闭]
@1002522146 2017-06-27T10:17:32.000000Z 字数 2109 阅读 667

Node.js进阶の文件上传

node.js


文件上传指的是将用户本地的文件上传到服务器中。
上传文件需要处理两个位置:

  1. 客户端

    •    客户端如何上传文件?

    • 上传文件的表单项需要指定为input,type是file

    • 要上传文件必须将表单enctype设置为multipart/form-data
      这个参数表示表单将会以多部件表单的形式上传

    enctype="application/x-www-form-urlencoded"是默认值。这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码。

    • multipart/form-data body-parser 无法解析,
      multer 模块专门用来帮助我们解析多部件的请求体。
  1. <body>
  2. <h2>文件上传(file upload)</h2>
  3. <form action="/testUpload" method="post" enctype="multipart/form-data" id="form">
  4. <pre>
  5. Hi sir <input type="text" name="username"/>
  6. upupup <input type="file" name="photo"/>
  7. <input type="submit" value="提交" id ="btn" style="width:100px;background-color: #99ff99" >
  8. </pre>
  9. </form>
  10. // 利用AJAX 上传文件
  11. <script>
  12. var btn = document.getElementById("btn");
  13. btn.onclick = function () {
  14. //FormData 这个对象可以用来对表单中的数据进行封装
  15. //使用FormData来对表单中的数据进行包装
  16. var fd = new FormData(document.getElementById("form"));
  17. //创建一个xhr对象
  18. var xhr = new XMLHttpRequest();
  19. //设置请求的地址
  20. xhr.open("post" , "/testUpload");
  21. //发送请求
  22. xhr.send(fd);
  23. //接收响应
  24. xhr.onreadystatechange = function () {
  25. if(xhr.readyState == 4 && xhr.status == 200){
  26. alert(xhr.responseText);
  27. }
  28. };
  29. //取消默认行为
  30. return false;
  31. };
  32. </script>
  33. </body>

2. 服务器端

  1. const express = require("express");
  2. const app = express();
  3. const bodyParser = require("body-parser");
  4. const multer = require("multer");
  5. app.use(bodyParser.urlencoded({extended:false}));
  6. app.use(bodyParser.json());
  7. app.use(express.static("public"));
  8. const storage = multer.diskStorage({
  9. //destination 用来设置上传文件的路径 可以接收一个回调函数, 或者一个字符串
  10. //如果传递一个回调函数的话,则需要确保路径有效
  11. destination: 'uploads/',
  12. //filename 属性可以用来指定文件上传以后保存到服务器中的名字
  13. filename: function (req, file, cb) {
  14. //cb(null, file.fieldname + '-' + Date.now())
  15. //获取文件的扩展名
  16. //Chrysanthemum.jpg
  17. let fname = file.originalname;
  18. let extName = "";
  19. //判断文件是否具有扩展名
  20. if(fname.lastIndexOf(".") != -1){
  21. extName = fname.slice(fname.lastIndexOf("."));
  22. }
  23. //上传文件时,一般不会直接将用户的文件名直接保存的服务器中
  24. //一般会随机生成一个文件名
  25. cb(null, file.fieldname + '-' + Date.now()+extName);
  26. }
  27. })
  28. const upload = multer(
  29. {
  30. storage: storage,
  31. limits:{
  32. //限制文件的大小为200kb
  33. fileSize:1024*200
  34. }
  35. });
  36. app.post("/testUpload" , (req , res)=>{
  37. //获取解析请求体的函数
  38. let fu = upload.single('photo');
  39. //手动调用函数来解析请求体
  40. fu(req , res , (err)=>{
  41. if(err){
  42. //证明上传出错了,文件大小超标
  43. res.send("文件太大了,请上传200kb以下的文件!!");
  44. }else{
  45. //读取请求参数
  46. let username = req.body.username;
  47. res.send("上传成功~~~");
  48. }
  49. });
  50. });
  51. app.listen(3333,()=>{
  52. console.log("success");
  53. });

文件夹示例

此处输入图片的描述

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注