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/"+pic
var 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 = 4000000
var zzz = /\.(jpg|png|jpeg|bmp)/i
var str = this.files[0].name
var sizes = this.files[0].size
var 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.localStorage
localStorage.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.file
fs.readFile(imges.path, (err, data) => {
if (err) {
console.log("图片上传失败")
return;
}
var imgesori = imges.originalname
var radname = Date.now() + parseInt(Math.random() * 999)
var oriname = imgesori.lastIndexOf('.')
var hzm = imgesori.substring(oriname, oriname.length)
var pic = radname + hzm
fs.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/' + pic
var 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模块获取到的
demo地址：https://github.com/dillonleader/Upload-pictures
Express+MySQL实现图片上传到服务器并把路径保存到数据库中的更多相关文章
- thinkphp表单上传文件并将文件路径保存到数据库中
上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` ( `id` int(11) ...
- MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器
MVC图片上传.浏览.删除 1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...
- php form 图片上传至服务器上
本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...
- 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- PHP上传图片，路径保存在数据库中，根据图片路径显示图片
1.创建数据表 CREATE TABLE image( id int(4) unsigned NOT NULL AUTO_INCREMENT, name varchar(100) default ...
- 根目录97 <input file>标签，把图片上传到服务器（跟增删改查一起实现）
首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...
- word图片上传到服务器
参考:http://blog.ncmem.com/wordpress/2019/08/07/word%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e5%88%b0%e6%9 ...
- ckeditor如何能实现直接粘贴把图片上传到服务器中?
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统
图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...
随机推荐
- [LeetCode] 930. Binary Subarrays With Sum 二元子数组之和
In an array A of 0s and 1s, how many non-empty subarrays have sum S? Example 1: Input: A = [1,0,1,0, ...
- 分享一个php加密字符串类。
class base64{ /** * 加密字符串 * @access static * @param string $data 字符串 * @param string $key 加密key * @r ...
- C#获取刚插入的数据的id
在开发程序中我们经常会遇到两个表或多个表关联同时插入数据的需求. 那么我们刚给主表插入一条数据,接着给副表插入数据时其中一个字段要存储与主表关联的id,那么我们该怎么获取刚插入的那条数据的id呢? ...
- 【Python】【Django】查询所有学生信息
要做到以下效果: 改代码后效果: 从0开始顺序计数: 倒叙计数到0
- V-Distpicker不能完整显示内容
V-Distpicker插件在列表中,或者在dialog中只显示了第一次的内容,第二次就开始报错.这个和前篇中的地图问题其实如出一辙. 解决办法,重加载,局部刷新. <el-form-item ...
- vue 父子传值，子页面没有实时刷新的问题
在做高德地图的时候,发现列表点击编辑的时候,地图不能实时更新: <el-form-item label="门店坐标:" :label-width="formLabe ...
- P 1015 德才论
转跳点:
- 洛谷 P2697 宝石串
题目传送门 解题思路: 将红色的设置为-1,绿色的为1,统计前缀和sum,如果sum[i] == sum[j],则说明i~j是一个稳定的区间 因为答案要求最大,所以我们要记录每个sum值的最左端点(也 ...
- 封装localStorage设置，获取，移除方法
export const local = { set(key, value) { localStorage.setItem(key, JSON.stringify(value)); }, get(ke ...
- 1 ~ express ~ 初始化。安装第三方模块express。中间件
一,初始化 二,安装第三方模块express 三,安装中间件 1,bodyParser : 解析 post 请求数据 2,cookies : 读写 cookie 3,swig :模板解析引擎 4,mo ...