node.js框架express文件上传操作

1.创建upload.html文件

<form action=‘/upload‘ method=‘post‘ enctype=‘multipart/form-data‘>
    头像:<input type=‘file‘ name=‘userImg‘/><br/>
    <input type=‘submit‘ value=‘上传头像‘/>
    <!--
    使用file上传图片的注意事项:
        1. method上传方式必须是post
        2. enctype=‘multipart/form-data‘
    -->
</form>

2.创建处理文件upload.js

// 引入express
let express=require(‘express‘);
let app=new express();
// body-parser
let bodyParser=require(‘body-parser‘);
// 引入 formidable
let formidable=require(‘formidable‘);
// 文件操作
let fs=require(‘fs‘);
let path=require(‘path‘);

// 处理post数据的提交
app.use(bodyParser.urlencoded({extended:false}));
// 配置静态资源路径
app.use(express.static(path.join(__dirname,‘upload‘)));

// 路由
// 访问 / ,跳转到upload.html
app.get(‘/‘,(req,res)=>{
    res.sendFile(__dirname+‘/3.upload.html‘);
})

// 处理post图片上传上来的数据
app.post(‘/upload‘,(req,res)=>{
    // 图片上传操作
    let form=new formidable.IncomingForm();
    form.parse(req,(err,files,file)=>{
        // console.log(files);
        // console.log(file);
        /* 1.上传[将图片从本地,上传到服务器]
        获取文件所在的位置 - 读取的管道流 - 管道流写的方式写进去 - 管道流
        */
        let read=fs.createReadStream(file.userImg.path);
        // 写入的时候,文件夹的名称如果不存在,则会写入失败了;需要手动创建
        let write=fs.createWriteStream(‘./upload/‘+file.userImg.name);
        read.pipe(write); // pipe 管道传输

        // 2.把图片的路径写入到 user-info 表中,数据库的更新操作

        // 3. 上传完成之后查看图片
        res.send(‘<img src="./‘+file.userImg.name+‘" width="200">‘);
    })
})

// 设置端口
app.listen(8080);

3.访问测试

nodemon upload.js

这样就可以进行文件上传了,文件上传的时候是上传到服务器中,如果想要存在数据库中,只需要把文件的名称存在数据库中就可以了

原文地址:https://www.cnblogs.com/ranyihang/p/12692155.html

时间: 2024-10-16 15:42:00

node.js框架express文件上传操作的相关文章

node.js框架 express

express是在node.js的基础上,拓展出的一个简洁实用的框架结构,运用这个东西,我们可以更方便的处理很多的事情.只要上手了,那就是个贝多芬! 一般安装express有几种方法. 第一,使用npm安装,cmd中输入npm install express -g,这个-g是全局安装,也就是安装在被你用"config set global"设置的文件夹里,需要注意的是,安装完了以后,需要改变环境变量以及其路径来指向你的安装目录. 第二,复制粘贴.(--废话!)不过这样的存在安全性问题,

Express文件上传之Multer

?Express文件上传之Multer Multer是一个nodejs中间件,用来处理http提交multipart/form-data,也就是文件上传.它是在busboy的基础上开发的. 在我看来,Multer是众多上传中间件里面使用起来最优雅的,且能满足大部分的上传要求.API也相对来说较为直观和简单. 安装 1 npm install multer --save 基本用法 1 2 3 4 5 var express = require('express') var multer = req

JavaScript进阶 九 JS实现本地文件上传至阿里云服务器

JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务器的操作.这次需要实现将本地打包好的文件上传至阿里云服务器.使用前面的图片文件上传方法无法完成此操作.操作界面如下: 思路 本地与服务端传输文件的格式应该是熟悉的Base64格式.首先需要将本地文件转换为Base64格式,传输至服务端后,在服务端再将Base64格式的文件转换为原始文件. 源码解析 控制器 /

笨鸟先飞之Java(一)--使用struts2框架实现文件上传和下载

不管是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个常用功能会有很多种解决方式,但是struts2的框架却能给我们一个比较简单的方式,下面就一起来看吧: 文件上传: 首先来看实现上传功能的表单,Index.jsp: <span style="font-family:FangSong_GB2312;font-size:18px;"><%@ page language="java" contentType=&q

PHP多文件上传操作

在前一篇文章里讲到了关于PHP文件上传原理和简单操作举例是单文件上传. http://www.cnblogs.com/lichenwei/p/3879566.html 其实多文件上传和单文件上传大同小异,原理都是一样的,只是在代码上做了点小技巧. 首先还是index.html上传表单,只是把之前上传文件表单里的file更改成了file[] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

node+express4实现简单文件上传

var express = require('express'); var multiparty = require('multiparty'); var app = express(); /*文件上传*/ app.post('/uploadimg', function(req, res, next){ //生成multiparty对象,并配置上传目标路径 var form = new multiparty.Form({uploadDir: './uploads'}); //上传完成后处理 fo

笨鸟先飞之Java(一)--使用struts2框架实现文件上传

无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: 文件上传: 首先来看实现上传功能的表单.Index.jsp: <span style="font-family:FangSong_GB2312;font-size:18px;"><%@ page language="java" contentType

python-selenium -- 文件上传操作

一.文件上传操作 win32gui.FindWindow(IPClassName,IPWindowName) 自顶层窗口开始寻找匹配条件的窗口,并返回这个窗口的句柄: IPClassName:类名,在Spy++里能够看到: IPWindowName:窗口名,标题栏上能看到的名字 win32gui.FindWindowEx(hwndParent=0,hwndChildAfter=0,IPszClassName=None,IPszWindowName=None) 搜索类名和窗体名匹配的窗体,并返回这

关于我使用spring mvc框架做文件上传时遇到的问题

非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题1:org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.ClassCastException: org.apache.catalin