前端上传图片到nodejs后端并将文件存储在后端，将图片连接存储在数据库

最新推荐文章于 2023-06-18 13:58:18 发布

zhenwei zhao

最新推荐文章于 2023-06-18 13:58:18 发布

阅读量6.9k

点赞数 15

分类专栏：前端学习总结文章标签：前端后端数据库

本文链接：https://blog.csdn.net/weixin_45822938/article/details/121003635

版权

前端学习总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

前端上传图片到nodejs后端并将文件存储在后端，将图片连接存储在数据库

1.前端文件

这里需要更改的url:'http://192.168.68.125:3000/upload',请求地址
图片地址

$('img').attr('src',`http://192.168.68.125:3000/${data.img}`);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<input type="file" id="file">
<button onclick="doUpload()">按钮</button>
<img src="" alt="">
<script>
    function doUpload(){
        let file=$('#file').get(0).files[0];

        console.log(file)
        let formdata=new FormData();//创建空的formData对象
        // hehe前端上传图片的Key 值 与后端设置的要一样
        formdata.append('hehe',file);
        $.ajax({
                url:'http://192.168.68.125:3000/upload',
                type:'POST',
                cache:false,//不必须
                data:formdata,
                processData:false,//必须
				contentType:false,
				success:function(data){
                    console.log(data)
                if(data.err==0){
                    console.log('上传成功');
                    //渲染图片
                    $('img').attr('src',`http://192.168.68.125:3000/${data.img}`);
                }else{
                    alert('上传是失败,请重试')
                }
            }
            }

        )
    }
</script>
</body>
</html>

点击选择图片文件，点击按钮发起请求
在这里插入图片描述

2.nodejs代码

首先导入相应的包

const db = require("./nodejs-orm/index")
const express = require('express')
const { send } = require("express/lib/response")
const path =require("path")

let cors = require('cors')

const app = express()
const port = 3000

app.use(cors())
app.use(express.json());
app.use(express.urlencoded());

配置静态文件
这里设置public为静态文件存储文件夹

// 在一个项目中会有一个静态资源文件夹
app.use(express.static(path.join(__dirname,'public'))); //设置在public下查找资源(以public为根去找静态资源)

// 这四句代码，模板引擎初始化工作
// 引入express-art-template 使用对应的引擎
app.engine('html',require('express-art-template'))
// 项目环境的设置
// 生产环境（线上） production
// 开发环境  development
app.set('view options',{
    debug:process.env.NODE_ENV !== 'production'
});
// 设置在哪一个路径下查找模板文件
app.set ('views',path.join(__dirname,'views'));
// 设置模板的后缀名
app.set('view engine','html')

导入multer包，设置请求地址，连接数据库将文件存储在public文件夹下，将请求地址存储在数据库中

const multer=require('multer')
var storage=multer.diskStorage({
    destination:function(req,file,cb){
        //指定文件路径存储地
        cb(null,'./接口/EXpress/public/');
        
    },
    filename:function(req,file,cb){
        //指定存储后的文件名(有两个问题)
        //1文件名重复覆盖  时间戳
        //2后缀名发生改变
        console.log('---',file);
        //获取后缀名
        let exts=file.originalname.split('.');
        let ext=exts[exts.length-1];
        let tepname=(new Date()).getTime()+parseInt(Math.random()*9999);
        //拼接名字
        cb(null,`${tepname}.${ext}`);
    }
});

var upload=multer({
    storage:storage
});

app.post('/upload',upload.single('hehe'),(req,res)=>{
    //hehe 要上传图片数据的key值 必须和前端保持统一   {   'hehe':图片数据}
    // console.log(req.file);
    // { fieldname: 'hehe',//接受数据库的key值
    //     originalname: '2019-12-06_102017.jpg',//原始名字
    //     encoding: '7bit', //转码
    //     mimetype: 'image/jpeg', //文件类型
    //     destination: './uploads', //存储位置
    //     filename: 'aaa.jpg',//文件名字
    //     path: 'uploads\\aaa.jpg',//文件地址
    //     size: 33479 }
    let {size,mimetype,path}=req.file;
    console.log(mimetype)
    let types=['jpeg','jpg','png','gif'];//允许上传的类型
    let tmpType=mimetype.split('/')[1];

    console.log(tmpType)
    if(size>5000000){
        return res.send({err:-1,msg:'上传的内容不能超过5000000'})
    }else if(types.indexOf(tmpType)==-1){
        return res.send({err:-2,msg:'上传的类型错误'})
    }else{
    // 服务器静态化目录 app.use('/filename',express.static(path.join(process.cwd(),'./uploads')));
        let url=`${req.file.filename}`;
        http = 'http://192.168.68.125:3000/'+url
        let Studens = db.model("studens")
        Studens.insert({hdname:'dsadas',hdjieshao:http},(err,data)=>{
            console.log(err);
            // res.send(data)
            res.send({err:0,msg:'上传成功',img:url})
        })
        
    }