nodejs接收图片，以及静态资源托管让前端访问

先说一下nodejs接收图片，然后保存到本地，很简单，我看了很多文章花里胡哨，还运行不了

1.首先安装express,multer,cors这三个包 npm i express --s 剩下同理，这个不讲

2.在app.js主文件写入

//引入
const express = require('express')
const multer = require("multer");

//创建服务器实例对象
const app = express()

//解决跨域
const cors=require('cors')
app.use(cors())

let objMulter = multer({ dest: "./public/upload" });
//实例化multer，传递的参数对象，dest表示上传文件的存储路径
app.use(objMulter.any())//any表示任意类型的文件
// app.use(objMulter.image())//仅允许上传图片类型

app.use(express.static("./public"));//将静态资源托管，这样才能在浏览器上直接访问预览图片或则html页面

//此处我写了模块化，你们也可以不用模块化，直接在这里写get,post请求也可以
const uploadimg=require('./router/uploadimg')
app.use('/api',uploadimg)

//启动服务器
app.listen(3000,()=>{
    console.log('http://127.0.0.1:3000')
})

3.以上完成app.js内容，接下来在app.js同级创建一个public文件夹，在他文件下创建一个upload文件夹用来存放图片。

像这个样子就行了。

4.在app.js同级目录下再创建最后两个文件夹，分别是router与router_handler

5.router文件夹创建一个uploadimg.js，这个名字可以自己起，只要对的上面的就行

//创建服务器
const express = require('express')
const router=express.Router()

const handle= require('../router_handler/uploadimg')

router.post('/uploadimg',handle.uploadimg)

module.exports =router

6.router_handler文件夹下创建同名uploadimg.js，这个名字也可以自己起，只要对的上面的就行

const db = require('../db/index')
fs = require("fs");

exports.uploadimg=(req,res)=>{
  let oldName = req.files[0].filename;//获取名字
  let originalname=req.files[0].originalname;//originnalname其实就是你上传时候文件起的名字
  //给新名字加上原来的后缀
  let newName = req.files[0].originalname;
  fs.renameSync('./public/upload/'+oldName, './public/upload/'+newName);//改图片的名字注意此处一定是一个路径，而不是只有文件名
  res.send({
    err: 0,
    url:"http://127.0.0.1:3000/public/upload/" +
    newName
  });
}

此时已经大功告成了

7.图片访问，注意

app.use(express.static("./public"));//将静态资源托管，这样才能在浏览器上直接访问预览图片或则html页面

这是我们在app.js托管的静态资源，访问时路径要去掉public

http://127.0.0.1:3000/upload/112.jpg，这样可以直接访问不用在写访问接口

同理，你的app.js写成了这样

app.use(express.static("./public/upload"));//将静态资源托管，这样才能在浏览器上直接访问预览图片或则html页面

那么你访问时候就成了这个路径

http://127.0.0.1:3000/112.jpg

8.postman测试接口

追加：有的小伙伴提出了导入的这个，不知道是什么

const db = require('../db/index')

这个基本上nodejs访问数据库目录规范

里面的内容是

const mysql = require('mysql')
const db = mysql.createPool({
    host:'127.0.0.1',
    user:'root', //换成你的数据库用户名
    password:'123456',  //换成你的数据库密码
    database:'bishe',  //你要访问的数据库
    port:3306          //数据库端口号
})
module.exports = db

其实上传图片应该是没有需要连接数据库的，这里做个小扩展，如果报错了，大家可以删除掉那一行。

nodejs接收图片，以及静态资源托管让前端访问

猜你喜欢