ajax +NodeJS 实现图片上传实例_网络技术_宿州市腾雀网络科技有限公司

ajax +NodeJS 实现图片上传实例

发布时间 - 2026-01-11 01:45:53 点击率：次

前台用jquery的ajax发请求，后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来，而不是看了别人写好就直接“拿来”用

note(注意)

大家先在public目录下创建一个名为uploads的文件夹，这个文件夹是用来保存你上传过的图片

安装multer模块：

npm i -S multer

code（代码）

1.app.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

//所有请求过来，都去项目当前的public目录下寻找所请求的文件，找到就返回
app.use(express.static('./public'));

//选择diskStorage存储
const storage = multer.diskStorage({
 destination: function (req, file, cb) {
  cb(null, path.resolve('public/uploads'));
 },
 filename: function (req, file, cb) {
  cb(null, Date.now() + path.extname(file.originalname));//增加了文件的扩展名
 }
});

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

app.post('/profile', upload.single('avatar'), function(req, res, next) {

 res.send({
  err: null,
  //filePath:就是图片在项目中的存放路径
  filePath: 'uploads/' + path.basename(req.file.path)
 });
});

app.listen(3000, function () {
 console.log("app is listening 3000 port");
});

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>

</head>
<body>
<form class="form-horizontal" enctype='multipart/form-data' method='post' action='javascript:;'>
  <input type="file" id="choose"/>
  <button onclick="handle()">上传</button>
  <img class="newImg"/>
</form>

<script>
  function handle() {
   //获取上传的File对象，此处是一张图片对象
    let file = document.getElementById("choose").files[0];
    let formData = new FormData();
    formData.append("avatar", file);//设置key为avartar,value为上述的File对象
    $.ajax({
      type: 'POST',
      url: '/profile',
      data: formData,
      processData: false,
      success: function (data) {
        $(".newImg").attr("src", data.filePath);//上传成功则图片显示
      },
      error: function (err) {
        console.log(err.message);
      }
    })
  }
</script>
</body>
</html>

demo地址在这

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# NodeJS # 实现图片上传 # ajax # 图片上传 # node # 上传图片 # node.js+Ajax实现获取HTTP服务器返回数据 # Node.js服务器环境下使用Mock.js拦截AJAX请求的教程 # Node.js配合node-http-proxy解决本地开发ajax跨域问题 # Node.js获取前端ajax提交的request信息 # Ajax获取node服务器数据的完整步骤 # 上传 # 看了 # 目录下 # 在这 # 扩展名 # 先在 # 创建一个 # 都去 # 大家多多 # 好就 # 而不是 # 增加了 # 是用来 # file # req # resolve # null # cb # diskStorage

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在Linux中创建软链接快速学会创建和管理软链接的方法

下一篇：Power Automate怎么解析XML内容 XPath函

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在Linux中创建软链接快速学会创建和管理软链接的方法

下一篇：Power Automate怎么解析XML内容 XPath函