Node.js之图片上传
本文用node进行图片上传主要借助formidable插件,具体使用步骤如下:
1、安装formidable插件
npm install formidable -D
2、引入依赖包
const formidable = require('formidable');
3、接口实现逻辑
1 router.post('/uploadFile', (req, res, next) => { 2 let form = new formidable.IncomingForm(); 3 form.encoding = 'utf-8'; 4 //上传到服务器指定文件夹 5 form.uploadDir =`public/${constant.UPLOAD_FOLDER}`; 6 form.keepExtensions = true; //保留后缀 7 form.maxFieldsSize = constant.IMAGE_SIZE; 8 let data = new MsgBean('上传失败',1); 9 form.parse(req, (err, fields, files) => { 10 if (err) { 11 data.setContent(err); 12 res.send(data); 13 return; 14 } 15 let file = files.file; 16 let fileType = new RegExp(file.type, 'g'); 17 18 let isLegal = fileType.test(constant.IMAGE_TYPE); 19 if(!isLegal) {//判断上传图片格式是否合法 20 data.msg('非法的图片格式'); 21 res.send(data); 22 return; 23 } 24 let fileSize = file.size; 25 if(fileSize > constant.IMAGE_SIZE) {//上传图片超出最大限度 26 data.msg('图片大小超出最大限制'); 27 res.send(data); 28 return; 29 } 30 let index = file.name.lastIndexOf('.'); 31 let oldPath = files.file.path; 32 let uploadDate = new Date().getTime(); 33 let fileName = `${file.name.slice(0, index)}_${uploadDate}_origin.${file.name.slice(index+1)}`; 34 let newPath = `public/${constant.UPLOAD_FOLDER}/${fileName}`; 35 fs.rename(oldPath, newPath, err => {//图片更名 36 if(err) { 37 data.setContent('图片解析失败'); 38 res.send(data); 39 return; 40 } 41 let baseUrl = req.headers.host; 42 let imgUrl = `http://${baseUrl}/${constant.UPLOAD_FOLDER}/${fileName}`; 43 let result = { 44 imgUrl 45 }; 46 data.setCode(0); 47 data.setContent(result); 48 data.setMsg('上传成功'); 49 res.send(data); 50 }); 51 }) 52 });
转载于:https://www.cnblogs.com/gerry2019/p/10343557.html
Node.js之图片上传相关推荐
- node.js实现图片上传(包含缩略图)
图片上传 使用multiparty插件实现上传 安装multiparty npm i --save multiparty 代码实现 const multiparty = require('multip ...
- node.js实现图片上传
两步走战略: 将图片上传到服务器 将图片的路径保存到数据库 图片上传到服务器 下载第三方插件multer npm install multer --save 先写一个上传图片的接口 在路由文件夹中创建 ...
- 使用Node.js express 开发上传文件/图片api接口
我是傲夫靠斯,欢迎关注我的公众号[前端工程师的自我修养],每天更新. 今天我们来搞一个Node.js Express的上传文件功能,我使用了busboy这个库. Busboy是一个基于事件的文件流解析 ...
- node.js实现formdata上传文件
node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口--FormData.利用 FormData 对象,我们可以通过 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0(还有新版本)?...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- js实现图片上传预览功能
js实现图片上传预览功能 很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
- 前端js实现图片上传
前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...
- 手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传 选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象 效果图 原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
- 关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
最新文章
- RStudio v1.2.1335 发布,R 语言的集成开发环境
- 一路撑起支付宝的OceanBase数据库,背后究竟有哪些杀手锏?| 云·创课程报名
- Powershell 渗透测试工具-Nishang
- linux iconv函数失败,Linux 编码转换 (iconv失败的解决方法)
- idea 与springboot 快捷键
- 数码管和573锁存器的细节问题
- c++ map底层_深入浅出Redisredis底层数据结构(上)
- Markdown YYDS,但是编辑器依旧可以更好 | CSDN编辑器测评
- linux下c语言scanf,C语言输入scanf
- 玩转linux 中间的yum 命令
- Python 最抢手、Java 最流行,前线程序员揭秘 2019 软件开发现状
- vc++6.0常用插件和界面库
- php 编译指定libiconv,PHP升级编译出错 libiconv_open及 apache libiconv
- Gitee上传代码 提示remote Incorrect username or password ( access token )错误原因
- string entitlement = Application.dataPath+ “/Editor/Entitle Unity工程到处iOS工程,用脚本把Push Notifications打开
- 「网络流 24 题」餐巾计划 【网络流】
- STM32内部RAM在线调试配置方法及详细说明(基于Keil开发工具)
- 将UTC(字符串包含TZ的时间)时间转换成本地时间 python
- 软工实践 - 第十一次作业 Alpha 冲刺 (3/10)
- ACC-C++组初赛
热门文章
- poj 3071 Football 概率dp
- Illustrator 教程,如何在 Illustrator 中修改形状?
- Illustrator 教程,如何在 Illustrator 中更改角色的姿势?
- Mac 不能进入睡眠模式,如何修复?
- MacBook 显示未连接任何摄影机,视频镜头不能用怎么办?
- iOS开发之将base64位编码的字符串转换为图片,data转图片,图片转data
- Microsoft 365 for Mac(原Office 365)
- 如何在Mac设置开机自启程序项
- 图像处理软件Acorn for Mac如何创建新图像?
- BZOJ 5277 IQ题orz