热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Node.js实现文件上传的示例

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

文件上传指的是将用户本地的文件上传到服务器中。

上传文件需要处理两个位置:

客户端

  1. 客户端如何上传文件?
  2. 上传文件的表单项需要指定为input,type是file
  3. 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype=”application/x-www-form-urlencoded”是默认值。这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码。

1、multipart/form-data body-parser 无法解析, multer 模块专门用来帮助我们解析多部件的请求体。



文件上传(file upload)

    Hi sir 


    upupup 


              
  
// 利用AJAX 上传文件

2. 服务器端

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const multer = require("multer");
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static("public"));
const storage = multer.diskStorage({
  //destination 用来设置上传文件的路径 可以接收一个回调函数, 或者一个字符串
  //如果传递一个回调函数的话,则需要确保路径有效
  destination: 'uploads/',

  //filename 属性可以用来指定文件上传以后保存到服务器中的名字
  filename: function (req, file, cb) {
    //cb(null, file.fieldname + '-' + Date.now())
    //获取文件的扩展名
    //Chrysanthemum.jpg
    let fname = file.originalname;
    let extName = "";
    //判断文件是否具有扩展名
    if(fname.lastIndexOf(".") != -1){
      extName = fname.slice(fname.lastIndexOf("."));
    }

    //上传文件时,一般不会直接将用户的文件名直接保存的服务器中
    //一般会随机生成一个文件名
    cb(null, file.fieldname + '-' + Date.now()+extName);
  }
})
const upload = multer(
  {
    storage: storage,
    limits:{
     //限制文件的大小为200kb
     fileSize:1024*200
     }
  });
app.post("/testUpload" , (req , res)=>{
  //获取解析请求体的函数
  let fu = upload.single('photo');
  //手动调用函数来解析请求体
  fu(req , res , (err)=>{
    if(err){
      //证明上传出错了,文件大小超标
      res.send("文件太大了,请上传200kb以下的文件!!");
    }else{
      //读取请求参数
      let username = req.body.username;
      res.send("上传成功~~~");
    }
  });
});
app.listen(3333,()=>{
  console.log("success");
});

文件夹示例


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文探讨了 RESTful API 和传统接口之间的关键差异,解释了为什么 RESTful API 在设计和实现上具有独特的优势。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 探讨了如何解决Ajax请求响应时间过长的问题。本文分析了一个从服务器获取少量数据的Ajax请求,尽管服务器已经对JSON响应进行了缓存,但实际响应时间仍然不稳定。 ... [详细]
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 本文探讨了在Windows Server 2008环境下配置Tomcat使用80端口时遇到的问题,包括端口被占用、多项目访问失败等,并提供详细的解决方法和配置建议。 ... [详细]
  • 本文详细介绍了Java Web应用程序中的过滤器(Filter)功能,包括其作用、实现方式及配置方法。过滤器可以在请求到达目标资源之前对其进行预处理,并在响应返回给客户端之前进行后处理。 ... [详细]
  • 本文探讨了Java编程的核心要素,特别是其面向对象的特性,并详细介绍了Java虚拟机、类装载器体系结构、Java类文件和Java API等关键技术。这些技术使得Java成为一种功能强大且易于使用的编程语言。 ... [详细]
  • 本文详细介绍了如何在PHP中使用serialize()和unserialize()函数,以及它们在数据传输和存储中的应用。 ... [详细]
  • 阿里云ecs怎么配置php环境,阿里云ecs配置选择 ... [详细]
  • 本文详细介绍了如何利用Go语言和WebSockets技术构建一个高效的实时聊天系统。随着网络应用的日益复杂化,实时交互成为了提升用户体验的关键要素之一。通过本指南,开发者可以学习到最新的技术和最佳实践。 ... [详细]
  • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
  • 理解文档对象模型(DOM)
    本文介绍了文档对象模型(DOM)的基本概念,包括其作为HTML文档的节点树结构,以及如何通过JavaScript操作DOM来实现网页的动态交互。 ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
author-avatar
naozhewaner_254
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有