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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
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
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
cakephp常见知识点汇总
2017/02/24 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
php实现记事本案例
2020/10/20 PHP
jquery之empty()与remove()区别说明
2010/09/10 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
分析Python中解析构建数据知识
2018/01/20 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python操作cfg配置文件方式
2019/12/22 Python
python 穷举指定长度的密码例子
2020/04/02 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
python 基于wx实现音乐播放
2020/11/24 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
班级体育活动总结
2014/07/05 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
降价通知函
2015/04/23 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
奔腾年代观后感
2015/06/09 职场文书
早上好问候语大全
2015/11/10 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
Mysql排序的特性详情
2021/11/01 MySQL