(精华)2020年7月8日 Node.js connect的使用文件上传
2020-07-14 06:01
351 查看
客户端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <form id="formImg"> <p><input type="file" name="uploadImg"></p> <p><input type="button" value="提交" id="btnSubmit"></p> </form> <script> axios.defaults.withCredentials = false; //true 允许携带cookie false 不携带 axios.defaults.baseURL = 'http://localhost:3000'; var btnSubmit = document.getElementById('btnSubmit'); var formImg = document.getElementById('formImg'); var formData = new FormData(formImg); btnSubmit.addEventListener('click', async function () { //复杂请求 const res = await axios.post("/upload/img", formData, { headers: { 'Content-Type': 'multipart/form-data' } }) console.log('data', res.data) }) </script> </body> </html>
服务端
var connect = require('connect'); var bodyParser = require('body-parser'); //body解析 var cors = require('cors'); const url = require('url'); const qs = require('qs'); const path = require('path'); const formidable = require('formidable'); function logger(req, res, next) { console.log(req.method + ' ' + req.url); next(); //执行下一个中间件 } //注意post请求的时候可以通过req.body获取参数,但是url不行得 通过url去解析 function getParams(req) { //判断是什么请求 var query = {}; if (req.method.toLocaleLowerCase() == 'post') { query = req.body; } else { // localhost:9090/kkk?name=pp&age=pp const urlJson = url.parse(req.url); console.log('urlJson', urlJson); query = qs.parse(urlJson.query); console.log('query', query); } return query; } // 写成中间件形式 function getParamsMiddle(req, res, next) { if (req.method.toLocaleLowerCase() == 'post') { query = req.body; } else { const urlJson = url.parse(req.url); query = qs.parse(urlJson.query); } req.query = query; console.log('参数'); next(); } var app = connect(); app.use(cors()) // .use(function (req, res, next) { // //跨域处理 // // Website you wish to allow to connect // res.setHeader('Access-Control-Allow-Origin', '*'); //允许任何源 // // Request methods you wish to allow // res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); //允许任何方法 // // Request headers you wish to allow // res.setHeader('Access-Control-Allow-Headers', '*'); //允许任何类型 // //utf-8转码 // next(); //next 方法就是一个递归调用 // }) .use(logger) .use(function (req, res, next) { console.log('---------'); console.log(req.body); // undefined next(); }) //解析 application/json,最后保存的数据都放在req.body对象上 .use(bodyParser.json()) //JSON解析 // 解析 application/x-www-form-urlencoded .use(bodyParser.urlencoded({ extended: true })) .use(function (req, res, next) { console.log('++++++++'); console.log(req.body); // 有数据 next(); }) .use(getParamsMiddle) .use('/info', function (req, res, next) { //response 响应 request请求 // 中间件 // var queryres = getParams(req); //需要使用getParamsMiddle中间件 res.end(JSON.stringify(req.query)); var data = { "code": "200", "msg": "success", "result": [{ "id": 1, "name": "sonia", "content": "广告投放1----" }, { "id": 2, "name": "ben", "content": "广告投放2" }, { "id": 3, "name": "lili", "content": "广告投放3" } ] } res.end(JSON.stringify(data)); next(); }) .use('/upload/img', function (req, res, next) { var form = new formidable.IncomingForm(); // form.encoding='utf-8'; //设置表单域的编码 form.uploadDir = path.join(__dirname, './static'); //设置上传文件存放的文件夹,默认为系统的临时文件夹,可以使用fs.rename()来改变上传文件的存放位置和文件名 form.keepExtensions = true; //设置该属性为true可以使得上传的文件保持原来的文件的扩展名。 // form.parse(request, [callback]) // 该方法会转换请求中所包含的表单数据,callback会包含所有字段域和文件信息 form.parse(req, function (err, fields, files) { console.log(files) if (err) { return; }; var size = parseInt(files.uploadImg.size); if (size > 1024 * 1024) { res.end("图片过大!") // 删除文件操作。 用法:fs.unlink(path, [callback(err)]) fs.unlink(files.uploadImg.path); return; }; res.end(JSON.stringify({ data: 1, success: true, msg: 'success!' })); next(); }); }) .listen(3000);
相关文章推荐
- node.js 在 Express4.0 框架使用 Connect-Busboy 实现文件上传
- 关于node.js使用formidable多文件上传解决方案
- node.js中关于使用formidable模块实现文件上传至指定目录的问题
- node.js connect 实现文件上传
- 使用nodejs+express(4.x+)实现文件上传
- 使用nodejs+express(4.x+)实现文件上传
- 在Node.js中使用HTTP上传文件的方法
- node.js使用express框架进行文件上传详解
- 使用nodejs+express实现简单的文件上传功能
- (精华)2020年7月8日 Node.js express(JWT使用)
- [Node.js] 使用File API 异步上传文件
- Node.js使用HTTP上传G级的大文件
- 使用 HTTP 上传 G 级的文件之 Node.js 版本
- 在Node.js中使用HTTP上传文件的方法
- 使用nodejs+express(4.x+)实现文件上传
- Node.js 使用formidable上传文件及接受POST数据
- 使用Node.js的Express框架进行文件上传
- Node.js 上传文件formidable时使用fs.renameSync报错
- (精华)2020年7月8日 Node.js mysql的使用
- 使用 HTTP 上传 G 级的文件之 Node.js 版本