demo准备：mysql5.7.20 express4.0 处理图片文件的中间件Multer

  1. 先搭建服务器并展示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)
  1. 引入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()
  1. 接受客户端传过来的图片文件使用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 })

        })

    })

  })

})
  1. 客户端页面
<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>
  1. 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);

 }

})
  1. 服务端完整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实现图片上传到服务器并把路径保存到数据库中的更多相关文章

  1. thinkphp表单上传文件并将文件路径保存到数据库中

    上传单个文件,此文以上传图片为例,上传效果如图所示 创建数据库upload_img,用于保存上传路径 CREATE TABLE `seminar_upload_img` (  `id` int(11) ...

  2. MVC图片上传、浏览、删除 ASP.NET MVC之文件上传【一】（八） ASP.NET MVC 图片上传到服务器

    MVC图片上传.浏览.删除   1.存储配置信息 在web.config中,添加配置信息节点 <appSettings> <add key="UploadPath" ...

  3. php form 图片上传至服务器上

    本文章也是写给自己看的,因为写的很简洁,连判断都没有,只是直接实现了能上传的功能. 前台: <form action="upload.php" method="PO ...

  4. 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  5. PHP上传图片，路径保存在数据库中，根据图片路径显示图片

    1.创建数据表   CREATE TABLE image( id int(4) unsigned NOT NULL AUTO_INCREMENT, name varchar(100) default ...

  6. 根目录97 <input file>标签，把图片上传到服务器（跟增删改查一起实现）

    首先来个简单的html页面: enctype="multipart/form-data" encoding="multipart/form-data" acti ...

  7. 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 ...

  8. ckeditor如何能实现直接粘贴把图片上传到服务器中?

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  9. django实现图片上传后自动修改尺寸并保存修改后的图到数据库和本地文件系统

    图片上传首先要是设置settings.py文件(与静态文件设置类似) MEDIA_ROOT = os.path.join(BASE_DIR,'media')MEDIA_URL = '/media/' ...

随机推荐

  1. Arduino nano的bootloader文件烧录

    1.买了了nano还没用就用 avrisp烧录器给烧了其他程序,仅仅是的avr单片机了:2.将他恢复成Arduino nano吧. 在Arduino软件安装目录中的hardware\arduino中. ...

  2. SLAM的评测工具evo

    遇到的问题 今天用orbslam2跑euroc数据集,将结果和真实轨迹用evo测评,发现差别特别大: evo_traj tum data.tum CameraTrajectory.txt --plot ...

  3. 提交作业 C语言I作业11

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/10127 我在这个课程的目标 ...

  4. 掌握这几点，轻松搞定Essay Cohesion写作

    Cohesion就是衔接,是留学生Essay写作中中一个很重要的评价标准.很多留学生在平时Essay写作中,主体段已经做到了有观点.有例子,字数也不差,但总是被评价为展开不够.说理不清.不好follo ...

  5. opencv人脸检测

    找了一张自己喜欢的<超人前传>剧照 其中的xml分类器需要到https://github.com/opencv/opencv/tree/master/data/haarcascades去下 ...

  6. Docker 容器shell

    版权所有,未经许可,禁止转载 章节 Docker 介绍 Docker 和虚拟机的区别 Docker 安装 Docker Hub Docker 镜像(image) Docker 容器(container ...

  7. Django配置日志

    在settings里配置 # 日志配置 LOGGING = { # 是python的版本 'version': 1, # 是否禁用 'disable_existing_loggers': False, ...

  8. 【转】Selenium 利用javascript 控制滚动条

    http://luyongxin88.blog.163.com/blog/static/92558072011101913013149/ < xmlnamespace prefix =" ...

  9. 【Android】家庭记账本手机版开发报告四

    一.说在前面 昨天 对界面显示和逻辑结构进行完善 今天 1.添加菜单(查询.清除所有等) 2.使用滑动删除 问题 1.在做查询时获取SearchView时引 入包错误经过长时间的尝试后才修正 2.滑动 ...

  10. oracle批量修改字段长度

    alter table 表名 modify (字段名1 字段类型1(长度1),字段名2 字段类型2(长度2)) alter table 表名 modify column_name varchar2(3 ...