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

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

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值