Express实现图片上传

最新推荐文章于 2024-03-20 11:31:22 发布
最新推荐文章于 2024-03-20 11:31:22 发布
阅读量2.8k 收藏 3
点赞数 1
分类专栏： node 文章标签： node Express
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtbk123/article/details/89143369
版权

首先在node下面下载Express以及multer

npm i express
npm i multer

然后写代码

const Express = require("express");
const app = new Express;
const fs = require("fs");
const multer = require("multer");
var upload = multer({ dest: 'uploads/' })//当前目录下建立文件夹uploads
app.post('/uploads', upload.single('files'), function (req, res, next) { res.send("12") });
app.listen(3000, () => { console.log(123) });
app.get("/form", function (req, res) { res.send(fs.readFileSync("./form.html", "utf8")) });

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form method="POST" action="/uploads" enctype="multipart/form-data">
        <input type="file" value="上传" name="files">
        <input type="submit">


    </form>
</body>

</html>

再启动node就可以实现图片上传，接下来是多个图片上传

const Express = require("express");
const app = new Express;
const fs = require("fs");
const multer = require("multer");
var upload = multer({ dest: 'uploads/' })//当前目录下建立文件夹uploads
app.post('/uploads', upload.array('files',2), function (req, res, next) { res.send("12") });
app.listen(3000, () => { console.log(123) });
app.get("/form", function (req, res) { res.send(fs.readFileSync("./form.html", "utf8")) });
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form method="POST" action="/uploads" enctype="multipart/form-data">
        <input type="file" value="上传" name="flies">
        <input type="file" value="上传" name="flies">
        <input type="submit">


    </form>
</body>

</html>

只需略微修改便可以

渣渣前端
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
NodeJS实现图片上传代码(Express)
10-19
本篇文章主要介绍了NodeJS实现图片上传代码(Express) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Node.js(express)-图片上传接口写法
qq_41197472的博客
04-14 2954
背景 作为一名接口调用师，今天我们来用node写一个图片上传的接口。。。 需要 node-express框架 const multer = require('multer'); const fs = require('fs') const path = require('path') 需要的三个模块，一个是文件上传的接口一个是文件读取的模块，一个是路径设置的模块。 步骤和代码 完整代码 const multer = require('multer'); const fs = require('fs') c
vue+express+ElementUI实现单图片上传至服务器
weixin_42088314的博客
12-09 1087
一、初始化后台项目 这里通过手动创建项目，你也可以通过脚手架创建。 创建一个文件夹font-server，执行以下初始化命令 npm init -y npm install expres body-parser //安装express和body-parser npm install multer --save //Multer 是一个node.js中间件，主要用于上传文件。 在font-server目录下新建文件app.js，新建文件夹upload、api。在api文件夹下新建文件upLoadImg.j
express实现图片上传
最新发布
qq_55491577的博客
03-20 224
在express中可以使用multer实现图片上传。下载express multer。
express图片上传接口代码
zhangli0421的博客
10-08 381
1.配置一个upload路由（可以参考其他路由配置） 2.在upload.js中开始写代码，我们是利用multer中间键去处理的： var express = require('express'); var router = express.Router(); var multer = require('multer'); //设置上传的的图片保存目录 var objMulter=multer({dest: './public/images'}); // 上传任何文件objMulter.any()
记录一下学习 express过程，实现上传图片功能呢。
weixin_40340586的博客
03-15 269
使用express+multer实现node中的图片上传功能 – 悠悠之家。xiaoguo 非常好。自己试了一遍，可以。
使用Node.js express 开发上传文件/图片api接口
小帅的编程笔记
09-08 1994
我是傲夫靠斯，欢迎关注我的公众号【前端工程师的自我修养】，每天更新。 今天我们来搞一个Node.js Express的上传文件功能，我使用了busboy这个库。 Busboy是一个基于事件的文件流解析器，不仅限于Express框架使用，其他的任何文件流都能使用。它不存储文件，而是直接将文件写入到你提供的写入流。 使用Busboy可以让我们的上传更加简单，接下来我们一步步搞起来。 Node.js express 上传文件/图片步骤 1.创建express应用项目 2.安装express、busboy依赖 .
node.js express框架实现文件上传与下载功能实例详解
10-16
主要介绍了node.js express框架实现文件上传与下载功能,结合具体实例形式详细分析了node.js express框架针对文件上传与下载的前后台相关实现技巧,需要的朋友可以参考下
ajax +NodeJS 实现图片上传实例
01-02
前台用jquery的ajax发请求，后台用NodeJS 的multer模块实现图片上传。这个demo给我的感悟是一定要自己能实现出来，而不是看了别人写好就直接“拿来”用 note(注意) 大家先在public目录下创建一个名为uploads的...
使用Vue实现图片上传的三种方式
10-18
在项目中经常会遇到图片上传功能，今天脚本之家小编给大家带来了使用Vue实现图片上传的三种方式，感兴趣的朋友一起看看吧
express实现文件上传功能
qq_43934844的博客
11-04 2163
express实现文件上传功能
图片上传本地预览插件
12-22
图片上传本地预览插件
基于express的文件上传功能实现
weixin_49592687的博客
05-03 1573
基于express 的文件上传功能 功能描述 可以上传文件,并在后台中看到上传的文件 可以上传图片,并进行一个简单预览,点击提交后可以在后台中看到 功能展示 功能实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
二.基于nodejs express multer 上传图片功能实现+详细说明_番茄出品
lazy_tomato的博客
04-01 4639
START 前几天熬夜做了一个基于nodejs的后端服务，连接mysql数据库搞定了。 但是最近遇到上传图片一个需求，这如何实现呢？别着急，番茄带你一点一点实现。 本文作者：lazy_tomato 编写时间：2022/03/31-22/21 前情提要 首先我们已经基于express搭建了一个后端服务。 其次我们使用mysql5已经成功连接并可以操作数据库了。 不清楚这些的可以访问我上一篇博客 ：https://blog.csdn.net/wswq2505655377/article/details
1.2 Express 上传文件接口，node上传图片api接口
草木疏博客
10-27 622
Express 上传文件接口，node上传图片api接口
19.Express结合multer上传图片
FatPuffer
09-07 343
nodejs文件上传
nodejs-使用multer实现多张图片上传,express搭建脚手架
weixin_34273479的博客
03-26 1148
nodejs-使用multer实现多张图片上传,express搭建脚手架 　　在工作中，我们经常会看到用户有多张图片上传，并且预览展示的需求.那么在具体实现中又该怎么做呢？ 　　本实例需要nodejs基础，本实例尽可能的在代码中实现了解读，如有疑惑点，欢迎提问。但是提问之前，希望你能先自行尝试解决，锻炼解决问题的能力。 　　首先使用express脚手架生成,并且安装依赖 express...
express+multer实现上传图片
qq_45963949的博客
11-12 1262
其实很简单，就跟写平时的路由一样一样的 第一步 npm install multer 第二步 在路由文件夹里创建一个multer文件夹，里面再创建一个index.js文件(也可以不创，直接写在其他子路由里，我这里是为了项目结构更清晰) index.js里的内容： 1.先引入 const express = require('express') const router = express.Router() const multer = require('multer'); 2.指定文件储存的路径 v
nodejs实现图片上传
03-06
Node.js是一个基于Chrome V8引擎的JavaScript运行环境它可以用于服务器端编程。在Node.js中，可以使用一些库和框架来实现图片上传功能。 一种常见的实现方式是使用Express框架和Multer库。下面是一个简单的示例代码： 1. 首先，确保已经安装了Node.js和npm（Node.js的包管理器）。 2. 创建一个新的Node.js项目，并在项目目录下打开终端。 3. 执行以下命令来初始化项目并安装所需的依赖： ``` npm init -y npm install express multer ``` 4. 创建一个名为`app.js`的文件，并将以下代码复制到文件中： ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/upload', upload.single('image'), (req, res) => { // 处理上传的图片 // req.file 包含上传的文件信息 res.send('图片上传成功！'); }); app.listen(3000, () => { console.log('服务器已启动，监听端口3000'); }); ``` 5. 在终端中执行以下命令来启动服务器： ``` node app.js ``` 现在，你可以使用POST请求将图片上传到`/upload`路径。上传的图片将保存在`uploads/`目录下。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值