Node.js实现图片上传功能

node接口实现

const express = require('express')
const mysql = require('mysql')
const cors = require('cors') // 跨域
const bodyParser = require('body-parser') // 解析参数
const app = express()
const router = express.Router()

const multer = require('multer')//用于处理 multipart/form-data 类型的表单数据
const fs = require('fs') //引入文件模块
const path = require('path')//引入路径模块

app.listen('9000',()=>console.log('服务启动'))

const option = {
　　host:'localhost',
　　user:'***',//服务器用户名
　　password:'***',//密码
　　port:'***',//端口
　　database:'***',//数据库
　　connectTimeout:5000, // 连接超时
　　multipleStatements:false // 是否允许一个query中包含多条sql语句
}

app.use(cors()) //解决跨域
app.use(bodyParser.json()) //json请求
app.use(bodyParser.urlencoded({extended:false})) // 表单请求
app.use('/public',express.static(path.join(__dirname,'./www')))//存放图片上传路径

const conn = mysql.createConnection(option)

//上传接口
app.all('/upload',multer().single('img'),(req,res)=>{

　　let {buffer,mimetype} = req.file;
　　let fileName = (new Date()).getTime() + parseInt(Math.random()*3435) + parseInt(Math.random()*6575);
　　let fileType = mimetype.split('/')[1];
　　let filePath = path.join(__dirname,'/www/images')
　　let apath = `http://服务器ip:端口/public/images/${fileName}.${fileType}`

　　fs.writeFile(`./www/images/${fileName}.${fileType}`,buffer,(data)=>{
　　　　if(data){
　　　　　　res.send({err:0,msg:"上传失败"})
　　　　}else{
　　　　　　conn.query("INSERT INTO 表名 VALUES ('"+fileName+"','" + fileName + "." + fileType + "','" + apath + "')") //给表中存入图片信息
　　　　　　res.send({err:1,msg:"上传成功",imgPath:apath})//返回给前端图片路径
　　　　}
　　})
})

前端页面请求

html
<input type="file" id='put'>
<img src="" alt="" width="500" >
<button id="btn">上传图片</button>

javascript
var btn = document.getElementById("btn");
let url='服务器ip:端口';
btn.onclick = function(){
   //通过文件域获取上传的图片信息
   var a = document.getElementById("put").files[0];
   var formdata = new FormData();
   formdata.append('img',a);
   //console.log(formdata.get('img'))

   $.ajax({
      url:url+'/upload',
      data:formdata,
      type:'get',
      processData: false,//必须
      contentType: false,//必须
      success:function(data){
        console.log(data)
        var imgpath = data.imgPath
        $('img').attr('src',imgpath)
      }
   })
}

 注意：

　　需要先在对应目录建好文件夹