深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上鸿蒙开发知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
所需要的前置知识:基本的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
})
多文件上传
// 多文件上传
// upload.array('formDate中的字段名', 最大上传数量)
router.post('/files', upload.array('files', 4), (req, res) => {
console.log(req.files)
res.send('ok')
![img](https://img-blog.csdnimg.cn/img_convert/64a3cc16e437930b669109b0d9adb66f.png)
![img](https://img-blog.csdnimg.cn/img_convert/d92740773f74e1b1d2a003d5451da3ef.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618636735)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
O-1715897675572)]
[外链图片转存中...(img-ETvITF4n-1715897675572)]
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化的资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618636735)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**