使用nodejs+express实现简单的文件上传功能

2024-12-14 11:14:09

1.建立express项目

express -e nodejs-uploadfile

2.下载multer中间件

npm i multer or yarn multer

3.在routes/index.js中引用multer，由于还要使用到文件操作，还要引用fs模块,并指定文件上传目录

const multer = require('multer');
const fs = require('fs');
const UPLOAD_PATH = './uploads'

单文件上传: index.html中文件如下( form文件的类型必须为 enctype="multipart/form-data" ),

<form action="/upload" method="post" enctype="multipart/form-data">
 <input name="fileUpload" type="file" />
 <img src="" alt="">
 <button type="submit">上传</button>
</form>

在routes/index.js里面添加upload路由用来处理上传文件的操作

router.post('/upload', upload.single('fileUpload'), function (req, res, next) {
 const { file } = req;
 fs.readFile(file.path, function(err, data) {
 fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
  if (err) res.json({ err })
  res.json({
  msg: '上传成功'
  });
 });
 })
})

如果上传的文件是图片的话，还可以使用FileReader对象实现图片预览

(function($){
 $('input').on('change', function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $('img').attr('src', ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))

多文件上传: 多文件上传的原理和单文件上传的原理一样，代码如下：

router.post('/upload', upload.array('fileUpload'), function (req, res, next) {
 const files = req.files;
 const response = [];
 const result = new Promise((resolve, reject) => {
 files.map((v) => {
  fs.readFile(v.path, function(err, data) {
  fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {
   const result = {
   file: v,
   }
   if (err) reject(err);
   resolve('成功');
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: '上传成功',
 })
 }).catch(err => {
 res.json({ err })
 });
})

相关代码在 github.com/bWhirring/n…

总结

以上所述是小编给大家介绍的使用nodejs+express实现简单的文件上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

基于nodejs+express(4.x+)实现文件上传功能

Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新.基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术.在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代.带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响:但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码. 通过一段时间的查阅资料.摸索,我发现实现上传的方式有:1.expres
nodejs+express实现文件上传下载管理网站

nodejs+express-实现文件上传下载管理的网站项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异
Nodejs进阶：基于express+multer的文件上传实例

概览图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘. 基础例子:借助express.multer实现单图.多图上传. 常用API:获取上传的图片的信息. 进阶使用:自定义保存的图片路径.名称. 环境初始化非常简单,一行命令. npm install express multer multer --sav
Ajax异步文件上传与NodeJS express服务端处理

为了避免在实现简单的异步文件上传功能时候引入一个第三方库文件的尴尬情形(库文件可能造成多余的开销,拉低应用加载速度,尤其是在引入库文件之后仅使用其中一两个功能的情况下,性价比极低),最近了解了一下文件异步上传的实现原理,顺带看了看进度条.图片预览等功能的实现,做一点简单的整理. 文件上传 HTML结构如下,一个file input和一个button.当点击"上传"按钮的时候,将file input选中的文件上传到服务器. <input type="file"
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=
NodeJS使用formidable实现文件上传

最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat
使用nodejs+express实现简单的文件上传功能

1.建立express项目 express -e nodejs-uploadfile 2.下载multer中间件 npm i multer or yarn multer 3.在routes/index.js中引用multer,由于还要使用到文件操作,还要引用fs模块,并指定文件上传目录 const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads' 单文件上传: index.h
node+express+axios实现单文件上传功能

本文实例为大家分享了node+express+axios实现单文件上传的具体代码,供大家参考,具体内容如下 1.安装依赖在node服务端安装依赖 cnpm i multer --save 2.后端代码 var express = require('express'); var router = express.Router(); //上传商品图片 var multer = require('multer'); var fs = require('fs'); var path = require
Spring Boot简单实现文件上传功能

目录前言后端处理物理路径和虚拟路径映射前言前端处理通过form表单来上传文件提交方式为post enctype格式为"multipart/form-data" input类型为file name属性必须和Controller中方法的形参名称一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl
C#简单实现文件上传功能

最近项目上的一个上传文件功能,项目是MVC+EF+LigerUI 来做的,贴出来大家一起分享下 1.页面需要引用这个JS 和 CSS <script type="text/javascript" src="/Content/uploadify/jquery.uploadify.min.js"></script> <link href="/Content/uploadify/uploadify.css" type=&q
Nodejs+express+html5 实现拖拽上传

一.前言文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j
thinkPHP3.2简单实现文件上传的方法

本文实例讲述了thinkPHP3.2简单实现文件上传的方法.分享给大家供大家参考,具体如下: IndexController.class.php: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { function index(){ $this->display(); } public function upload(){ $upload = new
Python+django实现简单的文件上传

今天分享一下Django实现的简单的文件上传的小例子. 步骤 •创建Django项目,创建Django应用 •设计模型 •处理urls.py 以及views.py •设计模板,设计表单 •运行项目,查看数据库下面我们就一起来分别完成每一个小部分吧. 创建项目和应用 django-admin startproject Django_upload django-admin startapp app 添加一个名为upload的目录,待会要用哦. 然后记得在settings.py 中的INS
jQuery+ajax简单实现文件上传的方法

本文实例讲述了jQuery+ajax简单实现文件上传的方法.分享给大家供大家参考,具体如下: 可以通过ajax来提交表单,而不会刷新页面.主要使用的方法是 $("#formID").ajaxSubmit()方法. 1.要引入js插件需要下载的附件:jquery.form.js 2.页面代码: <script src="project/js/jquery.form.js" type="text/javascript"></scr
python3写的简单本地文件上传服务器实例

python是个很好玩的东西?好吧我随口说的,反正因为各种原因(其实到底是啥我也不知道),简单的学习了下python,然后写了一个上传文件上服务器的小玩具练手. 大概功能是这样: 1.获取本地文件列表(包括文件夹) 2.检查服务器上是否存在,不存在直接上传,存在的话,文件夹无视,文件比较大小,大小不一致则覆盖,最后检查服务器上是否存在本地没有的文件,存在则删除 3.之后增加了忽略列表,忽略文件类型 4.然后增加了重启tomcat,但是这个功能未进行测试大概就是这个样子,哦了,丢代码丢代码 #!

使用nodejs+express实现简单的文件上传功能

相关推荐

随机推荐