nodejs后端, 前端图片上传

最新推荐文章于 2025-03-26 15:50:02 发布

原创最新推荐文章于 2025-03-26 15:50:02 发布 · 966 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

nodejs 专栏收录该内容

4 篇文章

订阅专栏

nodejs 后端部分
安装multer模块

npm install multer

引用模块
它是依赖于express的一个模块

//引用express并配置
var express = require("express");
var app = express();
app.listen(3000);

单文件上传

const express=require('express');
const router=express.Router();

//引入multer模块
const multer=require('multer')
var storage=multer.diskStorage({
    destination:function(req,file,cb){
        //指定文件路径存储地
        cb(null,'./uploads/img/');
    },
    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
});

router.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=`/filename/img/${req.file.filename}`;
        res.send({err:0,msg:'上传成功',img:url})
    }
});

module.exports=router;

前端部分
FormData是AJAX2.0中新增的构造函数,作用：用于快速将表单中的数据序列化
使用方式: var fd=new FormData(原生表单);
可以使用fd内部的方法来查看或者添加数据

 - fd.append(key,value)添加数据 
 - fd.set(key,value)设置数据(有则替换,没有则添加)
 - fd.get(key)获取数据(只能获取一条) fd.delete(key)删除数据
 - fd.getAll(key)获取所有的数据(返回值是一共数组) 
 - fd.has(key)该方法用于判断对象中是否包含某个属性(返回值是布尔值)

前端代码:

<!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://localhost:3000/file/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://localhost:3000${data.img}`);
                }else{
                    alert('上传是失败,请重试')
                }
            }
            }

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