Express+MySQL实现图片上传到服务器并把路径保存到数据库中
demo准备:mysql5.7.20 express4.0 处理图片文件的中间件Multer
先搭建服务器并展示html页面
const express = require("express");
const app = express();
app.engine('html',require("html-art-template")) // 安装解析html文件的模板引擎,cnpm i html-art-template -S
app.get("/",(req,res)=>{res.render("file.html")
})
app.listen(3001)
引入mysql和Multer
const mysql = require("mysql");
const multer = require("multer");
const upload = multer({dest:"uploads/"}) // 指定图片的存储位置var connmysql = mysql.createConnection({host:"127.0.0.1",port:"3306",user:"root",password:"2232723904",database:"picture"
})
connmysql.connect()
接受客户端传过来的图片文件使用post
const bodyParse = require("body-parse"); // 处理post请求的中间件
const fs = require("fs"); // 读写文件的模块
const path = require("path") // 处理路径的模块
app.use(bodyParse.urlencoded({extended:false // 这里是返回数据为false则是对象或者数组形式,为true则为任意数据类型
}))
app.use(bodyParse.json()) // 指定post请求的数据为json数据app.post('/picture',upload.single("imges"),(req,res)=>{var imges = req.file;fs.readFile(imges.path,(err,data)=>{ // 写入文件if(err){console.log(err,"图片读取失败")return }var imgesori = imges.originalname; // 图片名称var radname = Date.now()+parseInt(Math.random()*999)+parse(Math.random()*666) // 赋给图片的名称用时间戳+随机数获取var oriname = imgesori.lasrIndexof(".");var hzm = imgesori.substring(oriname,imgesori.length) // 图片后缀名var pic = radname+pic // 拼接处一个完整的图片名称fs.wrireFile(path.join(__dirname:'./public/image'+pic),data,(err) =>{if(err){console.log(err,"图片写入失败")}res.send({code:-1,msg:"图片上传失败"})return// 将图片的路径保存到数据库var picPath = "http://localhost:3001/public/image/"+picvar insertPic = "insert into pic_table(pic_router) values('"+picPath+"')"connmysql.query(insertPic,(err,result)=>{if(err){console.log(err,"图片路径储存数据库失败")} res.send({code:200,msg:"图片上传成功",urls:picPath }) })})})
})
客户端页面
<body><div class="outbox"><div class="skbox"><a href="javascript:void(0)">上传<input type="file" name="pic" id="pic"accept="image/jpeg,image/jpg,image/png,image/svg"></a></div><span></span><div class="imgbox"><img></div></div>
</body>
ajax部分
$(function(){// 封装ajax函数
function update(url, formdata, callback) {$.ajax({url: url,type: "POST",data: formdata,dataType: "json",processData: false, // jQuery不要去处理发送的数据contentType: false,success: function (data) {callback(data)},error: function (err) {console.log("服务器错误!", err);$("span").text("服务器错误,请重新上传!")}})}
// 执行input时间时调用
$("input").change(function () {var imgSize = 4000000var zzz = /\.(jpg|png|jpeg|bmp)/ivar str = this.files[0].namevar sizes = this.files[0].sizevar last = str.lastIndexOf('.')var jq = str.substring(last, last.length).toLowerCase();if (zzz.test(jq) && sizes <= imgSize) {var url = "/picture"var imgFiles = $("#pic")[0].files[0]var formdata = new FormData()formdata.append("imges", imgFiles)update(url, formdata, function (data) {console.log(data)if (data.code < 0) {$("span").text(data.msg)}$("span").text(data.msg)var localsto = window.localStoragelocalStorage.setItem("src", data.urls)$('.imgbox img').attr('src', localsto.src);})} else {alert("请选择一张正确的图片并且大小不能大于4M")}})// 将服务端返回的数据保存在localStorage中
window.onload = function(){var localsto = window.localStorage$('.imgbox img').attr('src', localsto.src);}
})
服务端完整app.js
const express = require('express')
const app = express()
const mysql = require("mysql")
const os = require("os")
const multer = require("multer")
const upload = multer({dest: 'uploads/'
})
const bodyParser = require("body-parser")
const fs = require("fs")
const path = require("path")var connsql = mysql.createConnection({host: "127.0.0.1",port: "3306",user: "root",password: "2232723904",database: "picture",
})
connsql.connect()app.engine('html', require('express-art-template'))
app.use('/public/', express.static('./public/'))
app.use(bodyParser.urlencoded({extended: false
}))
app.use(bodyParser.json())app.get('/', (req, res) => {res.render('file.html')
})app.post('/picture', upload.single('imges'), (req, res) => {var imges = req.filefs.readFile(imges.path, (err, data) => {if (err) {console.log("图片上传失败")return;}var imgesori = imges.originalnamevar radname = Date.now() + parseInt(Math.random() * 999)var oriname = imgesori.lastIndexOf('.')var hzm = imgesori.substring(oriname, oriname.length)var pic = radname + hzmfs.writeFile(path.join(__dirname, './public/image/' + pic), data, (err) => {if (err) {console.log("图片写入失败!")res.send({code: -1,msg: "图片上传失败!"})return}const couter = os.networkInterfaces()for (var cm in couter) {var cms = couter[cm]}var picPath = "http://"+cms[1].address + ':3001' + '/public/image/' + picvar insertPic = "insert into pic_table(pic_router) values('" + picPath + "')"connsql.query(insertPic, (err, result) => {if (err) {console.log("保存到数据库失败!")}res.send({code: 200,msg: "图片上传成功",urls: picPath})})})})
})app.listen(3001)
ps:app.js中的路径时通过node中提供的os
模块获取到的
Express+MySQL实现图片上传到服务器并把路径保存到数据库中相关推荐
- php文件上传并保存路径到数据库,thinkphp表单上传文件并将文件路径保存到数据库中?...
上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) ...
- tp5上传文件并获取文件路径_thinkphp表单上传文件并将文件路径保存到数据库中...
上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) ...
- 图片上传到服务器,存储路径和查看图片的设置
图片上传到服务器,两种路径选择方式: 选择路径的原因:如果选择绝对路径,图片会存在项目根目录下,这样的弊端是,如果项目重新发布,连带着旧项目的图片一并删掉了,除非手动先保存别的地方再拿过来. 选择相对 ...
- nodejs+express+mysql实现图片上传
nodejs+express+multer+ajax上传图片到服务器端,以及将图片路径保存到数据库 思路,使用nodejs中的express框架搭建好服务器,创建上传图片的路由,在工作目录中划分好服务 ...
- 文件路径存入mysql_网站的文件的上传,并将相对路径保存到数据库的代码实现。...
如果网站使用的是struts2框架,那么上传功能可以这样做. 网站的建设过程中免不了要上传文件,比如管理员上传图片到服务器上,然后将文件的相对路径保存在数据库. 这里为什么说是相对路径保存在数据库,因 ...
- nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
最终实现的效果,更改Input的值后,将图片显示出来.输入描述信息,提交后,图片上传到后台对应的路径下. Multer Multer 是一个node.js中间件,用于处理 multipart/form ...
- java图片如何上传_Java如何将图片上传到服务器
Java如何将图片上传到服务器 发布时间:2020-11-10 17:28:18 来源:亿速云 阅读:96 作者:Leah 这篇文章将为大家详细讲解有关Java如何将图片上传到服务器,文章内容质量较高 ...
- java 上传文件并读取_Java实现图片上传到服务器并把上传的图片读取出来
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢? 下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的 ...
- 微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器,并实现预览,删除功能...
js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...
最新文章
- 函数式 vs 指令式
- CentOS安装和配置FTP
- Apache Camel框架之事务控制
- 神经网络优化(二) - 滑动平均
- 技术博客么?开始每天一更
- JavaScript高级程序设计之客户端检测
- osg多线程_尝试使用Osg编译上下文实现多线程编译显示列表--总结
- 交换机工作原理_交换机你了解它吗?它工作原理是这样的
- Android心电数据分析,基于Android的心电信号分析系统研究
- 欧姆龙OMRON PLC程序,威纶触摸屏螺丝机 配方程序。 用ST语言编写程序+威纶触摸屏程序
- PLC 有哪几种常用编程语言
- WebStrom最新版官网下载包分享
- 【Linux】shell脚本实战-使用shell进行数学运算
- java中是什么意思_java中@什么意思
- 二哥回复读者:研三秋招一败涂地了,怎么办?
- 外贸邮箱购买申请哪个好?办公邮箱哪个比较好 工作用什么邮箱?
- MTK AF如何开启log 录制mobile log 如何full scan(无指令无图片版本)
- Qt QImage scaled方法缩放中的问题
- 『中级篇』什么是Container(15)
- 基于VuePress搭建网站
热门文章
- 关于人口普查的那些事,我用地图可视化把数据说明白
- PPT文本框中文字竖向居中
- 护眼灯国A与国AA级差别是什么?推荐双十一值得入手的国AA的护眼灯
- aes算法cbc模式c语言,AES算法及它的CBC加密模式
- 亚美尼亚副总理代表团造访清微智能
- Shell中的通配符
- 快速读懂机器学习(附送详细学习资源)
- 东莞理工学院计算机专业录取分数线,东莞理工学院录取分数线2021是多少分(附历年录取分数线)...
- 深入解析Pancakeswap Prediction|博饼预测玩法
- 《Python数据处理》7.2.4笔记:寻找唯一键的源码修改——由于zip方法