通过nodejs实现文件的上传
通过nodejs实现文件的上传
主要内容
本文将用来讲述如何通过nodejs进行文件上传,将会涉及到以下知识点:
- 通过express模块进行服务器的搭建
- 通过multer模块将上传的文件保存到指定目录
- 通过fs、path模块将文件改名,添加后缀
- 进行已上传文件的预览
思想
前端表单->后端接收文件本身->保存到服务器上->给数据库记录文件的一些信息->返回给nodejs相关信息->nodejs返回前端
注意:enctype必须得是multipart/form-data
<input type=file enctype="multipart/form-data" name="fieldname">
实现
multer->文件名随机->fs模块改名->path模块解析磁盘路径
本文将上传图片为例,下面开始详细的设计:
将需要用到的相关模块下载引入
该模块可以通过npm下载,npm的下载以及相关操作这里就不再诉说了,不是重点
npm init -y
npm i express multer
引入模块
const express = require("express");
const path = require("path");
const fs = require("fs");
const multer = require("multer");
服务器搭建
接下来将模块导入,搭建服务,监听端口
const app=express();
app.listen(8083,"localhost",()=>{
console.log("监听8083端口成功");//监听成功执行的回调函数
})
multer实例化以及安装该中间件
let objMulter = multer({ dest: "./public/upload" });
//实例化multer,传递的参数对象,dest表示上传文件的存储路径
app.use(objMulter.any())//any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型
静态资源托管
app.use(express.static("./public"));//将静态资源托管,这样才能在浏览器上直接访问预览图片或则html页面
新建接口获取发送过来的图片
通过打印req.files可知
fieldname: 表单name名
originalname: 上传的文件名
encoding: 编码方式
mimetype: 文件类型
buffer: 文件本身
size:尺寸
destination: 保存路径
filename: 保存后的文件名 不含后缀
path: 保存磁盘路径+保存后的文件名 不含后缀
app.post("/api/reg", (req, res) => {
let oldName = req.files[0].path;//获取名字
//给新名字加上原来的后缀
let newName = req.files[0].path + path.parse(req.files[0].originalname).ext;
fs.renameSync(oldName, newName);//改图片的名字
res.send({
err: 0,
url:
"http://localhost:8083/upload/" +
req.files[0].filename +
path.parse(req.files[0].originalname).ext//该图片的预览路径
});
});
通过postman软件上传图片检验
以上就是通过nodejs,简单的图片文件上传流程,都是本人的学习记录,如有不对,欢迎指出~
まだね~
完整代码如下
const express = require("express");
const path = require("path");
const fs = require("fs");
const multer = require("multer");
const app = express();
app.listen(8083, "localhost", () => {
console.log("已经监听8083端口");
});
let objMulter = multer({ dest: "./public/upload" }); //实例化multer,传递的参数对象,dest表示上传文件的存储路径
app.use(objMulter.any()); //any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型
app.use(express.static("./public"));
app.post("/api/reg", (req, res) => {
let oldName = req.files[0].path;
let newName = req.files[0].path + path.parse(req.files[0].originalname).ext;
fs.renameSync(oldName, newName);
res.send({
err: 0,
url:
"http://localhost:8083/upload/" +
req.files[0].filename +
path.parse(req.files[0].originalname).ext
});
});
通过nodejs实现文件的上传的更多相关文章
- nodeJs + js 大文件分片上传
简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- C# 用原生JS进行文件的上传
1.此文章是用原生JS来进行文件的上传,有两个版本,一个不用ajax,一个用ajax. 1)非AJAX <!DOCTYPE html> <html> <head> ...
- ssh整合问题总结--在添加商品模块实现图片(文件)的上传
今天在做毕设(基于SSH的网上商城项目)中碰到了一个文件上传的需求,就是在后台管理员的商品模块中,有一个添加商品,需要将磁盘上的图片上传到tomcat保存图片的指定目录中: 完成这个功能需要两个步,第 ...
- 文件的上传(如何兼容火狐与IE)与国际化的原理
1.文件的上传 [1] 简介 > 将本地的文件上传到服务器中 > 用户需要通过一个表单将文件上传到服务器中 [2] 表单的设置 ...
- java实现ftp文件的上传与下载
最近在做ftp文件的上传与下载,基于此,整理了一下资料.本来想采用java自带的方法,可是看了一下jdk1.6与1.7的实现方法有点区别,于是采用了Apache下的框架实现的... 1.首先引用3个包 ...
- 在SpringMVC框架下实现文件的 上传和 下载
在eclipse中的javaEE环境下:导入必要的架包 web.xml的配置文件: <?xml version="1.0" encoding="UTF-8" ...
- .Net多文件同时上传(Jquery Uploadify)
前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...
- mac下svn问题——“.a”(静态库)文件无法上传解决
mac下svn问题——“.a”(静态库)文件无法上传解决 “.a”(静态库)文件无法上传(svn工具:Versions) 网上查询了一下,说是Xcode自带的svn和Versi ...
随机推荐
- LeetCode No.70,71,72
No.70 ClimbStairs 爬楼梯 题目 假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. ...
- mysql挖掘与探索------第2章 索引1-1
1索引作用 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,只要执行个正确的’create index’,查询速度就可能提高百倍千倍,这可真有诱惑力.可是天下没有免 ...
- win10安装3DSMAX失败,怎么强力卸载删除注册表并重新安装
一些搞设计的朋友在win10系统下安装3DSMAX失败或提示已安装,也有时候想重新安装3DSMAX的时候会出现本电脑windows系统已安装3DSMAX,你要是不留意直接安装3DSMAX,只会安装3D ...
- django Field选项中null和blank的区别
blank只是在填写表单的时候可以为空,而在数据库上存储的是一个空字符串:null是在数据库上表现NULL,而不是一个空字符串: 需要注意的是,日期型(DateField.TimeField.Date ...
- MOOC(1)-使用pycharm新建Django项目、开发post接口
https://www.cnblogs.com/liqu/p/9308966.html 1.安装Django的两种方式: > 1) pip install django 2)下载离线安装包,进入 ...
- 链终止法|边合成边测序|Bowtie|TopHat|Cufflinks|RPKM|FASTX-Toolkit|fastaQC|基因芯片|桥式扩增|
生物信息学 Sanger采用链终止法进行测序 带有荧光基团的ddXTP+其他四种普通的脱氧核苷酸放入同一个培养皿中,例如带有荧光基团的ddATP+普通的脱氧核苷酸A.T.C.G放入同一个培养皿,以此类 ...
- Java JDBC调用inout类型参数的存储过程
存储过程参数类型:in.out.inout,in:输入类型,out:输出类型,inout:既可输入,也可以输出. 一.JDBC调用inout类型参数的存储过程,并且获得返回值 Class.forNam ...
- toString()和强制类型转换(String)的用法
原来是String类型的才可以强转到String,不然会报 ClassCastException异常: 所有的引用类型都从Object类继承了toString方法.
- res文件夹及xml资源文件详解
目录 一.values文件:存放字符串(strings).颜色(colors).尺寸(dimens).数组(arrays).样式(styles类似于CSS文件).类型等资源 二.drawable:存放 ...
- 网络健身O2O,能火吗?
谈到中国想要020的那些项目,总给人一种土豪烧钱的怪异形象,而最终的成败因素也变得简单,也即谁能烧到最后,谁就能称霸市场,可问题在于,前期投入太多,谁也不甘心主动退出,最后,只落得个油尽灯枯.这 ...