Express学习笔记（八）—— 文件上传与下载

文件上传

安装：npm install multer --save

导入

let multer=require('multer')
let fs=require('fs')

初始化上传对象

// 配置上传对象，上传到当前目录下public文件夹的upload文件夹中
// express快速创建的项目，当前目录相对于服务器启动对应的目录
let upload = multer({ dest: './public/upload' })

上传文件路由

// 上传单个文件
post.post('/upload',upload.single('file'),(req,res)=>{let oldPath=req.file.destination+"/"+req.file.filenamelet newPath=req.file.destination+"/"+req.file.originalname// 更改上传文件的存储名称fs.rename(oldPath,newPath,(err,res)=>{console.log("名字更改成功")})
})

上传多个文件，请参考 Multer-GitHub

ajax上传

<!--前端-->
<form id="uploadform" method="post"><input id="input" type="file" name="file"><button id="submit">提交</button>
</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>let formData $('#input').change(function (e) {let file = this.files[0]// 创建formData对象，将文件追加到formData对象中   formData= new FormData()     formData.append('file', file)// 预览图片// 生成url地址let imgUrl=window.webkitURL.createObjectURL(file)let img=new Image()img.src=imgUrl$('body').append(img)   })$("#submit").click(function () {$.ajax({url: "http://localhost:3000/users/upload",method: 'POST',data: formData,processData: false,contentType: false,}).then(res=>{console.log(res) // 上传成功})})
</script>

// 后端
app.post('/upload',upload.single('file'),(req,res)=>{// 设置路由允许所有源访问,否则会发生跨域问题res.append("Access-Control-Allow-Origin","*")// 设置路由允许所有请求类型访问res.append('Access-Control-Allow-Content-Type',"*")let oldPath=req.file.destination+"/"+req.file.filenamelet newPath=req.file.destination+"/"+req.file.originalnamefs.rename(oldPath,newPath,()=>{})res.json('上传成功')
})

文件下载

后端代码

app.get('/download', async (req, res) => {res.download("./public/upload/jq.jpg")
})

前端代码

<button id="download">下载</button>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script >$('#download').click(()=>{window.location.href="http://localhost:3000/users/download"})
</script>

Express学习笔记（八）—— 文件上传与下载相关推荐

java web 文件上传_Javaweb学习笔记10—文件上传与下载
今天来讲javaweb的第10阶段学习.文件的上传与下载,今天主要说的是这个功能的实现,不用说了,听名字就是外行人也知道肯定很重要啦. 老规矩,首先先用一张思维导图来展现今天的博客内容. ps:我的思 ...
网安学习笔记-1 文件上传
文件上传漏洞初步认识什么是文件上传漏洞指程序对文件的上传未作全面的限制,导致用户可以上传一些超越用户权限的一些文件,可以是木马,shell脚本,病毒等文件上传漏洞的危害可以通过文件上传漏洞上传 ...
antd vue表单上传文件_AntDesign vue学习笔记-自定义文件上传
上传文件时实际可能需要传输一个token. 方法一: 1.查看vue antdesign文档 https://vue.ant.design/components/upload-cn/ 2.使用cust ...
MUI学习笔记之图片上传和预览
MUI学习笔记之图片上传和预览源代码是从博客园下载我一边学习,一边注释,力求理解 <head> <meta charset="UTF-8"> <m ...
Servlet笔记十（文件上传和下载）
本栏博客目录 Serlvet笔记一(Servlet基础) Servlet笔记二(请求和响应) Servlet笔记三(会话及其会话技术) Servlet笔记四(JSP技术) Servlet笔记五(EL表 ...
java上传视频到七牛云_Java进阶学习：将文件上传到七牛云中
Java进阶学习:将文件上传到七牛云中通过本文,我们将讲述如何利用七牛云官方SDK,将我们的本地文件传输到其存储空间中去. JavaSDK:https://developer.qiniu.com/k ...
wmm的学习日记（文件上传漏洞）
这个星期正式学习了一下文件上传漏洞,虽然之前也有接触过这样的题目,但还是云里雾里的感觉.现在应该可以不靠题解完完全全靠自己的脑子做一些简单的题目啦.接下来就让我浅浅总结一下吧. 目录文件上传漏洞简介 ...
JavaWeb学习总结(五十)——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...
小汤学编程之JavaEE学习day05——会话管理、文件上传与下载、Ajax
一.会话管理 1.HTTP协议 2.会话的概念 3.会话跟踪技术 4.会话跟踪技术分类(四种) 二.文件上传与下载 1.上传 2.下载 3.上传和下载合并优化成 ...
JavaWeb学习总结——文件上传和下载
在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

Express学习笔记（八）—— 文件上传与下载

文件上传

文件下载

Express学习笔记（八）—— 文件上传与下载相关推荐

最新文章

热门文章