node.js使用express-fileupload中间件实现文件上传


Posted in Javascript onJuly 16, 2021

本文使用express作为服务端,使用express-fileupload库提供的中间件函数来接受从客户端传来的图片,并将图片作为文件存储在服务端。客户端使用create-react-app框架,bootstrap UI,axios发送http请求和提供进度条当前进度的值,上传成功后,根据图片在服务端上的位置,并显示图片。

初始化项目

mkdir react-file-upload    // 创建项目根目录
cd react-file-upload
npm init -y                // 初始化 npm 创建 package.json

安装一些必要依赖(dependencies)

npm i express express-fileupload
npm i -D nodemon concurrently    // 可以并行同时运行客户端和服务端(在本机进行测试)

更改 react-file-upload/package.json 中的 scripts 脚本

{
  "main": "server.js",
  "script" : {
    "start": "node server.js", 
    "server": "nodemon server.js",
    "client": "npm start --prefix client",  
    "dev": " concurrently \"npm run server\" \"npm run client\" "
  }
}
  • main 改为 server.js
  • start 使用 node 启动 express
  • server 使用 nodemon 启动 express ,nodemon会监视server.js文件是否有变动 (ctrl+S) 若有变动 重新启动服务器 而node启动则不会,需要手动重启服务(ctrl+C 且改动文件后重新运行 node server.js)
  • client 启动客户端 随后我们会创建 client 文件夹 编写 react 组件
  • dev 使用 concurrently 同时启动服务端与客户端

编写服务器

下面来编写 server.js 文件

const express = require('express');
const fileUpload = require('express-fileupload');

const app = express();
// 使用 express-fileupload 中间件
app.use( fileUpload() );

// 处理由 /upload 页面发送过来的post请求
app.post('/upload', (req, res) => {
  // req 中的 files 属性由 express-fileupload 中间件添加!? (疑问暂存)
  // 判断 files 属性是否存在 和 是否有文件传来 若无返回400
  if(req.files === null){
    return res.status(400).json({msg:'no file uploaded'});
  }
  // 否则 获取文件
  // file 由后文中 formData.append('file', file) 的第一个参数定义 可自定义为其他名称
  const file = req.files.file;
  // 移动文件到第一参数指定位置 若有错误 返回500
  file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
    if(err){
      console.error(err);
      return res.status(500).send(err);
    }
    // 若无错误 返回一个 json 
    // 我们计划上传文件后 根据文件在服务器上的路径 显示上传后的文件
    // 随后我们会在 react 组件中实现
    // 在客户端中的 public 文件夹下创建 uploads 文件夹 用于保存上传的文件
    res.json({fileName: file.name, filePath: `uploads/${file.name}`});
  });
});

app.listen(5000,() => {console.log('Server started...')});

现在运行一遍 server.js 保证无错误 会在控制台看到 Server started...

npm run server

node.js使用express-fileupload中间件实现文件上传

初始化客户端

然后我们创建客户端 我们使用 create-react-app 脚手架初始化项目

npx create-react-app client

初始化完成后 我们可以先选择性的删除一些不必要的文件

  • serviceWorker.js
  • logo.svg
  • index.css    // 之后我们会用link标签从cdn引入bootstrap的
  • App.test.js  // 只是个小demo

我们删除 src / index.js 文件中引入的 index.css,在 public 文件夹中的 index.html 模板文件中,直接引入bootstrap 的 css 和 js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!-- 引入css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow"  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow"  />
    <title>React File Uploader</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 引入js -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

编写组件

我们总共需要编写3各组件,分别为

  • FileUpload.js:用form标签的onSubmit和axios发送上传请求
  • Message.js:显示信息 上传成功 服务器错误 或 没有选择文件
  • Progress.js:用axios的onUploadProgress和bootstrap显示上传进度条

FileUpload

import React, { useState } from 'react'
import axios from 'axios'
import Message from './Message'
import Progress from './Progress'

const FileUpload = () => {

  return (
    <div>
      {message ? <Message msg={message} /> : null}
      <form onSubmit={onSubmit}>
        <div className="custom-file mb-4">
          <input type="file" className="custom-file-input" id="customFile" onChange={onChange}></input>
          <label className="custom-file-label" htmlFor="customFile">{filename}</label>
        </div>
        <Progress percentage={uploadedPercentage}></Progress>
        <input className="btn btn-primary btn-block mt-4" type="submit" value="Upload"></input>
      </form>
      {
        uploadedFile ? 
          <div className="row mt-5">
            <div className="col-md-6 m-auto">
              <h3 className="text-center">{uploadedFile.name}</h3>
              <img style={{width:'100%'}} src={uploadedFile.filePath} alt=""></img>
            </div>
          </div> :
          <p>nothing uploaded yet...</p>
      }
    </div>
  )
}
export default FileUpload

Message.js

import React from 'react'
import PropTypes from 'prop-types'

const Message = ({msg}) => {
  console.log('her')
  return (
    <div className="alert alert-info alert-dismissible fade show" role="alert">
      {msg}
      <button type="button" className="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  )
}
Message.propTypes = {
  msg: PropTypes.string.isRequired,
}
export default Message

Progress.js

import React from 'react'
import PropTypes from 'prop-types'

const Progress = ({percentage}) => {
  return (
    <div className="progress">
      <div className="progress-bar" role="progressbar" 
        style={{ width: `${percentage}%` }} 
        aria-valuenow={percentage} aria-valuemin="0" aria-valuemax="100">{percentage}%</div>
    </div>
  )
}
Progress.propTypes = {
  percentage: PropTypes.number.isRequired,
}
export default Progress

测试

目前为止,全部的功能组件都已完成。

npm run dev

node.js使用express-fileupload中间件实现文件上传

最后附上git地址 Git

到此这篇关于node.js使用express-fileupload中间件实现文件上传的文章就介绍到这了,更多相关node.js 文件上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
Jul 27 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
jquery插件懒加载的示例
Oct 24 jQuery
html5 录制mp3音频支持采样率和比特率设置
js基础语法与maven项目配置教程案例
JavaScript与JQuery框架基础入门教程
Jul 15 #Javascript
Python机器学习之决策树和随机森林
微信小程序scroll-view不能左右滑动问题的解决方法
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 #Javascript
You might like
php中设置多级目录session的问题
2011/08/08 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
Ext.MessageBox工具类简介
2009/12/10 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
js原型链原理看图说明
2012/07/07 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
详解Python装饰器
2019/03/25 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
Python 求向量的余弦值操作
2021/03/04 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
应届生个人求职信模板
2013/11/26 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
党员违纪检讨书
2014/02/18 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
钳工实训报告总结
2014/11/04 职场文书
工作自我推荐信范文
2015/03/25 职场文书
施工安全协议书
2016/03/22 职场文书