node-06-表单-upload

简介: node-06-表单-upload

1.客户端html



<form action="http://127.0.0.1:7799/upload" 
     enctype="multipart/form-data"
     method="POST">
         <input type="file" name="fileYzs">
         <input type="submit"  value="上传">
     </form>



2.服务端 js


上传有非常多流行的模块,

这里选择formidable 模块

  1. 安装
  2. 引用
  3. 创建文件上传对象
  4. 配置

编码方式 存储目录 是否保留扩展名等

  1. 接收并解析文件传过来的数据

如果选用读写流的形式  是默认存到根目录了


const http = require('http');
const url = require('url');
const fs = require('fs');
// node 里处理文件上传需要 formidable 模块
const fd = require("formidable");
const path = require("path");
http.createServer(function (req, res) {
    res.writeHead(200, {
        "content-type": "text/html;charset=utf-8"
    });
    let urlObj = url.parse(req.url);
    let pathname = urlObj.pathname;
    if (req.method === "GET" && pathname === "/favicon.ico") {
        let readS = fs.createReadStream("favicon.ico")
        readS.pipe(res);
    } else if (req.method === "POST" && pathname === "/upload") {
        // 1. 文件上传对象
        let formObj = new fd.IncomingForm();
        //必要的配置
        // 接收键值对的编码方式
        formObj.encoding = "utf8";
        // 上传文件的存放路径,一定要是全路径
        formObj.uploadDir = __dirname + "/upload"
        // 设置是否保留文件的扩展名,默认不保留 注意加s
        formObj.keepExtensions = true
        // 3. 接收并解析文件上传过来的数据
        formObj.parse(req, function (err, fields, files) {
            if (err) {
                console.log("失败",err);
                res.end("上传失败")
            }else{
                   //    获取文件名 临时路径
            let f = files.fileYzs
            let fName = f.name;
            let fPath = f.path;
            console.log("文件---", files);
            res.end(fPath)
            // res.json({
            //     code: 200, msg: "上传成功",
            //     img: path.basename(fPath)
            // })
            // 将文件从临时路径下转移到目标路径下
            // 读入流
            // let rs = fs.createReadStream(fPath);
            // 写入流
            // let ws = fs.createWriteStream(fName);
            // // 把数据从临时文件夹的位置 存到指定目录 ,就是读入流写到 写入流
            //  rs.pipe(ws);
            // //  默认存到根目录了
            res.end(fPath)
            }
            // console.log(fields);
            // console.log(files);
            /*
            err: 错误信息
            fields: 域,键值对信息 除了文件上传数据之外的配置信息
            files:  提交文件的所有的数据信息 ,文件大小,名,路径 具体看打印信息
             php movefile 把文件放到哪 是二维数组
             node里面是对象
            */
        });
    } else {
        res.json({ code: 1000, msg: "服务器问题" })
    }
}).listen(7799, function () {
    console.log("7799服务启动");
});

前端拿到返回的地址 可以用图片显示


3.multer 上传


这里用到了express


var multer  = require('multer');
//重命名 配置路径 扩展名等
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, __dirname+'/uploads/')
  },
  filename: function (req, file, cb) {
  var arr = file.originalname.split('.');
  var fileExt = arr[arr.length - 1];
    cb(null, file.fieldname + '-' + Date.now() + '.' + fileExt)
  }
})
var upload = multer({ storage: storage })
router.post('/myupload', upload.single('fileInfo'), function (req, res) {
  console.log("upload---",req);
  var fileName = req.file.filename;
  var arr = req.file.originalname.split('.');
  var fileExt = arr[arr.length - 1];
  var path = `${fileName}.${fileExt}`;
  res.json({
    code: 200,
    message: "上传成功",
    path: fileName
  })
})




相关文章
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
53 0
node笔记记录80练习1之3提交表单
node笔记记录80练习1之3提交表单
63 0
node笔记记录80练习1之3提交表单
node笔记记录80练习1之4提交表单
node笔记记录80练习1之4提交表单
49 0
node笔记记录80练习1之4提交表单
|
JavaScript 前端开发 Windows
node-05-基于表单的get-post
因为系统不同 Mac和 windows路径不同, 因为路径报错的话,自己看下报错,转换成自己的路径就行了
120 0
Node 04--使用Node处理表单请求与两种暴露方式
Node 04--使用Node处理表单请求与两种暴露方式
245 0
|
20天前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
23 2
2024年5月node.js安装(winmac系统)保姆级教程
|
19天前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
64 2
|
3月前
|
JavaScript
NodeJs的安装
文章介绍了Node.js的安装步骤和如何创建第一个Node.js应用。包括从官网下载安装包、安装过程、验证安装是否成功,以及使用Node.js监听端口构建简单服务器的示例代码。
NodeJs的安装
|
2月前
|
JavaScript 开发工具 git
已安装nodejs但是安装hexo报错
已安装nodejs但是安装hexo报错
34 2
|
2月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)