文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

nodejs如何实现简单的文件上传功能

2023-06-29 08:04

关注

这篇文章主要为大家展示了“nodejs如何实现简单的文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何实现简单的文件上传功能”这篇文章吧。

nodejs如何实现简单的文件上传功能

首先需要大家看一下目录结构,然后开始一点开始我们的小demo。

文件上传总计分为三种方式:

通过flash,activeX等第三方插件实现文件上传功能。

通过html的form标签实现文件上传功能,优点:浏览器兼容好。

通过xhr level2的异步请求,可以百度formData对象。

这里使用2做个练习。

node插件请看下package.json文件

{  "name": "upload",  "version": "0.1.0",  "description": "upload demo",  "main": "app.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "iwang",  "license": "ISC",  "dependencies": {    "body-parser": "^1.15.2",    "connect-multiparty": "^2.0.0",    "express": "^4.14.0"  }}

  dependencies中就是这次demo的依赖插件。我用的node.js是4.4.4版本的,大家可以把上面代码替换到你的package.json文件中,执行npm install 可以自动安装demo需要的三个依赖插件。

app.js

//express使用的是@4版本的。var express = require('express');//form表单需要的中间件。var mutipart= require('connect-multiparty');var mutipartMiddeware = mutipart();var app = express();//下面会修改临时文件的储存位置,如过没有会默认储存别的地方,这里不在详细描述,这个修改临时文件储存的位置 我在百度里查找了三四个小时才找到这个方法,不得不说nodejs真难学。//所以在这里留下我的学习记录,以备以后翻阅。app.use(mutipart({uploadDir:'./linshi'}));//设置http服务监听的端口号。app.set('port',process.env.PORT || 3000);app.listen(app.get('port'),function () {    console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.');});//浏览器访问localhost会输出一个html文件app.get('/',function (req,res) {    res.type('text/html');    res.sendfile('public/index.html')//这里用来玩,express框架路由功能写的,与上传文件没没有关系。app.get('/about',function (req,res) {    res.type('text/plain');    res.send('Travel about');//这里就是接受form表单请求的接口路径,请求方式为post。app.post('/upload',mutipartMiddeware,function (req,res) {    //这里打印可以看到接收到文件的信息。    console.log(req.files);        //给浏览器返回一个成功提示。    res.send('upload success!');

public/index.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <form action="/upload" enctype="multipart/form-data" method="post">        <p>附件:<input type="file" name="myfile" ></p>        <p>            <input type="submit">        </p>    </form></body></html>

浏览器地址访问index.html

nodejs如何实现简单的文件上传功能

选取文件:我选择了一个timg.jpg的文件

nodejs如何实现简单的文件上传功能

点击提交后跳转了页面,提示成功上传

nodejs如何实现简单的文件上传功能

我们看一下,linshi名字的问价加下是否已经存在我们上传的文件,下面的图证明文件已经储存在了upload_demo/linshi下面,图片名字被改成了一个临时命名。

我们可以在app.js中写代码处理我们的图片文件了。

nodejs如何实现简单的文件上传功能

demo要点:

首先安装好nodejs 我这里的版本为4.4.4。

创建一个英文命名的文件。手动,或使用npm init创建一个package.json文件。把上述package.json的文件内容替换掉你创建的package.json文件内容。

使用npm install 安装package.json中的插件。自动生成了node_modules文件。我们的依赖插件都放在了这里。

编写好我们的app.js index.html文件。或者复制上述两处代码。

命令行执行node app.js。

浏览器访问localhost:3000,即可出现我们的简单的上传页面了。

以上是“nodejs如何实现简单的文件上传功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯