Node.js中multer的相关操作

文章目录

一、练习看结构
- （1）index.html文件
- （2）server.js文件
- - 示例一
  - 示例二
- （3）常用
二、multer的用法示意图
三、表单转Ajax上传文件

一、练习看结构

（1）index.html文件

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>
<form action="/ser" method="post" enctype="multipart/form-data"><label for="inp">文本区:</label><input type="text" id="inp" name="myText"><br><br><input type="file" name="myFile" multiple><br><br><input type="file" name="youFile" multiple><br><br><input type="date" name="myDate"><br><br><input type="submit">
</form>
</body>
</html>

（2）server.js文件

示例一

const express = require('express'),multer = require('multer'),path = require('path')const upload = multer({dest: './文件存放处'})
const app = express()app.all('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'))
})const cpUpload = upload.fields([{name: 'myFile', maxCount: 5}, {name: 'youFile', maxCount: 5}])
app.all('/ser', cpUpload, (req, res) => {console.log(req.body)console.log('----------------------------------------------------------------------')console.log(req.files)res.send('<h1>提交成功!!!</h1>')
})app.listen(8888, () => {console.log('服务已连接, 8888端口监听中...')
})

此时我们在浏览器地址栏中输入127.0.0.1:8888，界面如下：

然后控制台输出内容：

服务已连接, 8888端口监听中...
[Object: null prototype] { myText: '你是大傻逼', myDate: '2021-10-05' }
----------------------------------------------------------------------
[Object: null prototype] {myFile: [{fieldname: 'myFile',originalname: 'wallhaven-57kjv5_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: '000a4b57e2c20abbbdae756d5f445769',path: '文件存放处\\000a4b57e2c20abbbdae756d5f445769',size: 13886918},{fieldname: 'myFile',originalname: 'wallhaven-j3vdvw_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: 'c00e3effcd6c3cb05525efb000d4e7f5',path: '文件存放处\\c00e3effcd6c3cb05525efb000d4e7f5',size: 8038016}],youFile: [{fieldname: 'youFile',originalname: 'wallhaven-m9wr8k_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: '73b042b30f8c32c54244016f71d711f3',path: '文件存放处\\73b042b30f8c32c54244016f71d711f3',size: 14208491},{fieldname: 'youFile',originalname: 'wallhaven-q2ljxr_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: '426d1ebe9c9531f9c9e98ebe1ea8759c',path: '文件存放处\\426d1ebe9c9531f9c9e98ebe1ea8759c',size: 5084243}]
}

示例二

同样的表单提交内容，下面是源码：

const express = require('express'),multer = require('multer'),path = require('path')const app = express()app.all('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'))
})const storage = multer.diskStorage({destination: function (req, file, cb) {cb(null, './文件存放处')console.log('1---', req.body)console.log('2---', file)}
})const upload = multer({storage: storage})const cpUpload = upload.fields([{name: 'myFile', maxCount: 5}, {name: 'youFile', maxCount: 5}])app.all('/ser', cpUpload, (req, res) => {console.log('3---', req.body)console.log('4---', req.files)res.send('<h1>提交成功!!!</h1>')
})app.listen(8888, () => {console.log('服务已连接, 8888端口监听中...')
})

下面是控制台输出内容：

服务已连接, 8888端口监听中...
1--- [Object: null prototype] { myText: '你是大傻逼' }
2--- {fieldname: 'myFile',originalname: 'wallhaven-57kjv5_3840x2160.png',encoding: '7bit',mimetype: 'image/png'
}
1--- [Object: null prototype] { myText: '你是大傻逼' }
2--- {fieldname: 'myFile',originalname: 'wallhaven-j3vdvw_3840x2160.png',encoding: '7bit',mimetype: 'image/png'
}
1--- [Object: null prototype] { myText: '你是大傻逼' }
2--- {fieldname: 'youFile',originalname: 'wallhaven-m9wr8k_3840x2160.png',encoding: '7bit',mimetype: 'image/png'
}
1--- [Object: null prototype] { myText: '你是大傻逼' }
2--- {fieldname: 'youFile',originalname: 'wallhaven-q2ljxr_3840x2160.png',encoding: '7bit',mimetype: 'image/png'
}
3--- [Object: null prototype] { myText: '你是大傻逼', myDate: '2021-10-05' }
4--- [Object: null prototype] {myFile: [{fieldname: 'myFile',originalname: 'wallhaven-57kjv5_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: '3efb403bacf4f55d14212ec4b99a40f5',path: '文件存放处\\3efb403bacf4f55d14212ec4b99a40f5',size: 13886918},{fieldname: 'myFile',originalname: 'wallhaven-j3vdvw_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: 'eedfe61376350ec698056f39caf038df',path: '文件存放处\\eedfe61376350ec698056f39caf038df',size: 8038016}],youFile: [{fieldname: 'youFile',originalname: 'wallhaven-m9wr8k_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: 'f8a927e26d65a1dc34d911b335d114c2',path: '文件存放处\\f8a927e26d65a1dc34d911b335d114c2',size: 14208491},{fieldname: 'youFile',originalname: 'wallhaven-q2ljxr_3840x2160.png',encoding: '7bit',mimetype: 'image/png',destination: './文件存放处',filename: 'fe687bfd497b1d20b6db4b52b27738ce',path: '文件存放处\\fe687bfd497b1d20b6db4b52b27738ce',size: 5084243}]
}

（3）常用

const express = require('express'),multer = require('multer'),path = require('path')const app = express()app.all('/', (req, res) => {res.sendFile(path.join(__dirname, 'index.html'))
})const storage = multer.diskStorage({ // 创建一个关于数据如何存储的配置信息destination: function (req, file, cb) {cb(null, './文件存放处') // 想要存放的路径},filename: function (req, file, cb) {cb(null, file.originalname) // 原文件名}
})const upload = multer({storage: storage}) // 配置信息装入// html里面有多个文件表单项时用下面这个
const cpUpload = upload.fields([{name: 'myFile', maxCount: 5}, {name: 'youFile', maxCount: 5}])app.all('/ser', cpUpload, (req, res) => {res.send('<h1>提交成功!!!</h1>')
})app.listen(8888, () => {console.log('服务已连接, 8888端口监听中...')
})

二、multer的用法示意图

三、表单转Ajax上传文件

index2.html文件:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="/ser" method="post" enctype="multipart/form-data"><input type="file" name="avatar1" multiple class="files"><br><br><input type="file" name="avatar2" multiple class="files"><br><br><input type="submit">
</form>
<br><button id="btn">我自己来发送请求</button>
</body>
<script>let inputFile = document.querySelectorAll('.files'),btn = document.querySelector('#btn')btn.onclick = function () {let xhr = new XMLHttpRequest()let myForm = new FormData()for (let i = 0; i < inputFile.length; i++) {for (let j = 0; j < inputFile[i].files.length; j++) {// 添加格式：name属性值，value属性值（如果是文件则对应文件）myForm.append(inputFile[i].name, inputFile[i].files[j])}}xhr.open('post', '/ser')xhr.send(myForm)xhr.onreadystatechange = function () {if (xhr.readyState === 4)if (xhr.status >= 200 && xhr.status < 300) {console.log('请求成功!!!')}}}
</script>
</html>

server2.js文件:

const express = require('express'),path = require('path'),multer = require('multer')const app = express()app.all('/', (req, res) => {res.sendFile(path.join(__dirname, 'index2.html'))
})const storage = multer.diskStorage({destination: function (req, file, cb) {cb(null, './我的文件存放目录')},filename: function (req, file, cb) {cb(null, Date.now() + path.extname(file.originalname))}
})const upload = multer({storage: storage
})const cpUpload = upload.fields([{name: 'avatar1',maxCount: 9},{name: 'avatar2',maxCount: 9}
])app.all('/ser', cpUpload, (req, res) => {res.send('文件上传成功!!!')
})app.listen(8888, () => {console.log('服务已启动, 8888端口监听中...')
})

Node.js中multer的相关操作相关推荐

JS中字符串的相关操作
2019独角兽企业重金招聘Python工程师标准>>> 一.字符串的创建创建一个字符串有几种方法.最简单的是用引号将一组字符包含起来,可以将其赋值给一个字符串变量. var myS ...
js 中对象--属性相关操作
查询属性: 可以用对象.属性来查询属性和属性方法或者对象["属性"] 来查询属性和属性方法演示代码: ...
在 Node.js 中操作 Redis
在 Node.js 中操作 Redis Node.js 中可以操作 Redis 的软件包推荐列表:https://redis.io/clients#nodejs. 推荐下面两个: node-redis ...
在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查
Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
在Node.js中操作文件系统(一)
在Node.js中操作文件系统在Node.js中,使用fs模块来实现所有有关文件及目录的创建,写入及删除操作.在fs模块中,所有对文件及目录的操作都可以使用同步与异步这两种方法.比如在执行读文件操作 ...
Node.js中使用百度统计API统计站点的访问量、访客数、IP数相关信息
详情访问:详情欢迎来我的个人网站:TanJia 今天,在个人网站的关于版块,添加了本站点的总访问量.总访客数以及当日的访问量等相关信息.使用的是百度统计的相关API. 首先,我们需要在百度统计中开通 ...
react性能优化方案_React灵敏且性能卓越的Spray + Akka解决方案，以“在Java和Node.js中发挥并发性和性能”...
react性能优化方案在我以前的文章中,我研究了一个虚拟的交易引擎,并将基于Java的阻止解决方案与基于Node.js的非阻止解决方案进行了比较. 在文章的结尾,我写道: 我怀疑随着Node.js的 ...
反应灵敏且性能卓越的Spray + Akka解决方案，以“在Java和Node.js中发挥并发性和性能”...
在我以前的文章中,我研究了一个虚拟的交易引擎,并将基于Java的阻止解决方案与基于Node.js的非阻止解决方案进行了比较. 在文章的结尾,我写道: 我怀疑在Node.js近期取得成功之后,越来越多的 ...
mysql语句在node.js中的写法
总结一下mysql语句在node.js中的各种写法,参考了npm网站mysql模块给的实例. 查询 select //1 db.query('select * from tuanshang_users ...

Node.js中multer的相关操作

文章目录

一、练习看结构

（1）index.html文件

（2）server.js文件

示例一

示例二

（3）常用

二、multer的用法示意图

三、表单转Ajax上传文件

Node.js中multer的相关操作相关推荐

最新文章

热门文章