nodejs receives pictures, and static resource hosting for front-end access

Let me talk about how nodejs receives pictures and saves them locally. It’s very simple. I’ve read a lot of articles, but they still don’t work.

1. First install the three packages of express, multer, and cors npm i express --s The rest is the same, this is not mentioned

2. Write in the app.js main file

//引入
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. Complete the content of app.js above, and then create a public folder at the same level as app.js, and create an upload folder under other files to store pictures.

Just like this will do.

4. Create the last two folders in the same directory as app.js, namely router and router_handler

5. Create an uploadimg.js in the router folder, the name can be chosen by yourself, as long as the above is correct

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

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

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

module.exports =router

6. Create uploadimg.js with the same name under the router_handler folder. This name can also be named by yourself, as long as it is correct.

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
  });
}

It's done now

7. Image access, pay attention

app.use(express.static("./public"));//Hosting static resources, so that you can directly access the preview image or html page on the browser

This is the static resource we host in app.js, the path should remove public when accessing

http://127.0.0.1:3000/upload/112.jpg , so that you can directly access without writing the access interface

Similarly, your app.js is written like this

app.use(express.static("./public/upload"));//Hosting static resources so that you can directly access the preview image or html page on the browser

Then it becomes this path when you visit

http://127.0.0.1:3000/112.jpg

8. postman test interface

Addition: Some small partners proposed to import this, but I don’t know what it is

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

This basically nodejs access database directory specification

The content inside is

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

In fact, there should be no need to connect to the database to upload pictures. Here is a small extension. If an error is reported, you can delete that line.

nodejs receives pictures, and static resource hosting for front-end access

Guess you like