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
模块
- 安装
- 引用
- 创建文件上传对象
- 配置
编码方式 存储目录 是否保留扩展名等
- 接收并解析文件传过来的数据
如果选用读写流的形式 是默认存到根目录了
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 }) })