node.js学习----14Express中图片上传_express 访问图片-优快云博客

这篇博客介绍了如何在Node.js的Express框架中实现图片上传功能。首先，通过npm安装multiparty库，然后在代码中引入并设置上传路径。在服务器端，通过multiparty解析上传请求，将图片保存在指定的upload目录，并配置静态资源中间件以便访问已上传的图片。前端表单需设置enctype为"multipart/form-data"，但AJAX请求不一定需要。最后，博主分享了后端接口的日志输出和前端请求数据的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装使用
https://www.npmjs.com/package/multiparty
具体使用
1.npm install multiparty

2.var multiparty = require(‘multiparty’);

3.上传图片的地方

var form = new multiparty.Form();

form.uploadDir=‘upload’ 上传图片保存的地址

form.parse(req, function(err, fields, files) {
console.log(fields); 获取表单的数据
console.log(files); 图片上传成功返回的信息
});

4.在项目中创建 upload 文件夹，存放图片

5.配置中间件，用来访问已上传的图片
app.use(’/upload’,express.static(‘upload’));

6.注意：在客户端提交的时候
html页面form 表单要加入 enctype=“multipart/form-data”
但是 ajax 不需要加入
有些请求方式需要加入，有些不需要

具体例子后端：
项目结构：
在这里插入图片描述

index.js代码：

//图片上传插件的使用

/*
1.npm install multiparty

2.var multiparty = require('multiparty');

3.上传图片的地方

 var form = new multiparty.Form();

 form.uploadDir='upload'   上传图片保存的地址

 form.parse(req, function(err, fields, files) {
        console.log(fields);  获取表单的数据
        console.log(files);  图片上传成功返回的信息
 });

4.在项目中创建 upload 文件夹，存放图片

5.配置中间件，用来访问已上传的图片
  app.use('/upload',express.static('upload'));

6.注意：在客户端提交的时候
  html页面form 表单要加入 enctype="multipart/form-data"
  但是 ajax 不需要加入
  有些请求方式需要加入，有些不需要，

* */
// 引入
var express=require('express');
// 实例化
var app=express();

//设置跨域访问
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});


// 引入上传图片的模块
var multiparty = require('multiparty');

//  静态文件的托管，在 upload 目录下找到图片
//  upload/1SqaidwKTg71IDnb8wa5mNVm.jpg
//  访问地址 http://127.0.0.1:3000/upload//1SqaidwKTg71IDnb8wa5mNVm.jpg
app.use('/upload',express.static('upload'));


// 要返回的 json 数据
var myResult = {
    code: "",
    message:"默认",
    token:""
}

//获取表单提交的数据 以及post过来的图片
app.post('/uploadimg',function(req,res){

    //获取表单的数据 以及post过来的图片

    var form = new multiparty.Form();

    form.uploadDir='upload'   //上传图片保存的地址     目录必须存在

    form.parse(req, function(err, fields, files) {

        //获取提交的数据以及图片上传成功返回的图片信息
        console.log(fields);  /*获取表单的数据*/
        console.log(files);  /*图片上传成功返回的信息*/
        // 拿到的是 提交的数据 和图片 路径 保存到数据库表中


        myResult.code = "200";
        myResult.message="成功";

        res.send(myResult);

    });
})

// 监听端口
app.listen(3000,'127.0.0.1');

启动后端服务器：
在这里插入图片描述

接口访问后：打印的日志：

在这里插入图片描述

图片已成功保存在 upload 目录下
访问图片：
在这里插入图片描述

ok, 讲完了
下面贴出前端的请求数据的代码：test2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 适配手机-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <title></title>
</head>
<body>
    <div id="yhm">用户名</div>
    <input id="inputImg1" class="addput" type="file" accept="image/*" name="images" onchange="fileUpload(this)">
    <!--提交文件-->
    <div style="margin-top: 30px" onclick="myOnclick()">提交</div>

    <script>
        var fileimg1;
        //    读取图片1
        function fileUpload(fff) {
            var fileReader = new FileReader();//创建文件读取对象
            fileimg1 = fff.files[0];//获取file组件中的文件
        }
        //    上传图片
        function myOnclick() {

            var yum = document.getElementById('yhm').innerText;

            var formData = new FormData();

//      用户名：
            formData.append("username", "zhh");

//      图片1
            if (fileimg1 != null) {
                formData.append("image", fileimg1);
            }
//      请求路径：
            var httpurl = "http://127.0.0.1:3000/uploadimg";

//        请求数据
            $.ajax({
                url: httpurl,//请求的url地址
                type: 'post',//设置请求的http方式，method也可以
                data: formData,
                async: true,
                processData: false,
                contentType: false,

                success: function (data, textStatus, jqXHR) {//请求成功之后执行的回调函数

                    console.log("返回数据>>>" + data.message);

                },
                error: function (jqXHR, textStatus, errorThrown) {//请求失败之后执行的回调函数
                    console.log(errorThrown);

                }
            });


        }


    </script>

</body>
</html>

源码下载：
https://download.youkuaiyun.com/download/zhaihaohao1/10958350