node文件上传与下载(基于express和multer实现)_nodejs + express文件上传下载

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

node文件上传与下载

所需要的前置知识：基本的html标签，基本DOM, AJAX, express 等

创建基本的 express 项目

使用express-generator生成基本的项目结构

全局安装express-generator

npm install -g express-generator 

创建express 项目

express upload-download
cd upload-download
npm install

用vs code打开项目

code .

全局安装nodemon, 已方便文件更改时自动更新项目

npm install -g nodemon

安装multer中间件，实现文件的上传功能

npm install --save multer

安装cors中间件，解决跨域问题（我不明白为什么会有跨域问题）

npm install cors

启动项目

先修改项目根目录package.json，将node 改为 nodemon，如图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ztk9Qn4C-1674530175550)(node文件上传与下载.assets/image-20220302112943997.png)]

再启动项目

npm start

客服端

• 在public文件下新建index.html
• 创建html基本结构
• 在script标签前创建所需要的标签

<!-- 单文件上传 -->
<input type="file" id="file">
<!-- 多文件上传 -->
<input type="file" id="files" multiple>
<!-- 最简单的下载方式，download属性告诉浏览器要进行文件的下载 -->
<a href="http://127.0.0.1:3000/download" download="">下载</a>

• 引入 axios

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.0/axios.min.js"></script>

• 编写js 代码

const file = document.getElementById('file')
const files = document.getElementById('files')
axios.defaults.baseURL = 'http://127.0.0.1:3000'
// 单文件上传
file.addEventListener('change', async (e) => {
    const formDate = new FormData()
    // 键值对，key,value 键为file, 值为文件
    formDate.append("file", e.target.files[0])
    const {data: res} = await axios.post("/file", formDate, {
        // 因为axios默认的Content-Type 为json，所以需要修改
        headers: {
            "Content-Type": "multipart/form-data"
        }
    })
    console.log(res);
})
// 多文件上传
files.addEventListener('change', async (e) => {
    const formDate = new FormData()
    const files = e.target.files
    // 我不知道为什么不能用forEach
    for(let i = 0; i < files.length; i++){
        formDate.append('files', files[i])
    }
    const {data: res} = await axios.post("/files", formDate, {
        // 因为axios默认的Content-Type 为json，所以需要修改
        headers: {
            "Content-Type": "multipart/form-data"
        }
    })
    console.log(res);
})

服务端

文件上传

单文件上传接口

• 在app.js中配置 cors中间件，解决跨域问题

const cors = require('cors')
app.use(cors())

• 在routes/index.js中编写接口, 并在浏览器输入http://localhost:3000/，选择第一个按钮上传文件

var express = require('express')
var router = express.Router()
const multer = require('multer')
// multer配置
const upload = multer({ dest: 'assets/uploads' })
// 单文件上传接口
    router.post('/file', upload.single('file'), (req, res) => {
      console.log(req.file)
      res.send('ok')
    })

module.exports = router

服务器端控制台打印信息

{
  fieldname: 'file',
  originalname: 'yunyoujun.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: 'assets/uploads',
  filename: 'fc6acbf4b3348b82d85b6cf3edc967dd',
  path: 'assets\\uploads\\fc6acbf4b3348b82d85b6cf3edc967dd',
  size: 773524
}

客服端控制台打印信息

ok

在assets/uploads目录下生成了文件名为fc6acbf4b3348b82d85b6cf3edc967dd的文件，vs code显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XUWdhHC3-1674530175551)(node文件上传与下载.assets/image-20220302121147054.png)]

在fc6acbf4b3348b82d85b6cf3edc967dd加上文件名后缀.png就可以正常访问文件了

---

配置multer实现自动修改文件名

const storage = multer.diskStorage({
  // 上传文件的目录
  destination: function (req, file, cb) {
    cb(null, 'assets/uploads')
  },
  // 上传文件的名称
  filename: function (req, file, cb) {
    cb(null, file.originalname)
  }
})
// multer 配置
const upload = multer({
  storage
})

---

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

0-1715897715913)]
[外链图片转存中…(img-F3V7S3tn-1715897715914)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！