web大作业（3）文件的上传和下载

最新推荐文章于 2024-03-23 16:29:14 发布

spring__festival

最新推荐文章于 2024-03-23 16:29:14 发布

阅读量498

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/spring__festival/article/details/106690436

版权

首先是老师的用户界面和学生的用户界面，根据作业要求我设计了如下功能：
老师界面的body：

<h1>你好，老师，你可以：</h1>
    <button id="upload">上传文件</button>
    <button id="live">直播</button>
    <button id="problem">出题目</button>
    <button id="exit">退出登录</button>

学生界面的body：

<h1>你好，同学，你可以：</h1>
    <button id="download">下载文件</button>
    <button id="live">看直播</button>
    <button id="problem">做题目</button>
    <button id="exit">退出登录</button>

下面实现文件上传，首先老师点击上传文件时要绑定一个事件：

document.getElementById("upload").onclick = function(){
        location.href = "/upload.html"
    }

上传文件的网页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件</title>
</head>
<body>
    <h1>文件上传</h1>
    <form action="/fileupload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" >
        <button type="submit">上传</button>
    </form>
</body>
</html>

路由设计：

app.post("/fileupload",upload.single('file'),function(req,res){
  console.log(req.file)
  let oldpath = req.file.destination+"/"+req.file.filename
  let newpath = req.file.destination+"/"+req.file.originalname
  fs.rename(oldpath,newpath,()=>{})
})

这里用到了multer模块，要先引入并设置：

var multer = require("multer")
let upload = multer({
  dest:"./public/upload"
})

dest表示上传到哪里，这样文件上传功能就实现了。

然后是学生下载，首先是为下载文件按钮绑定事件：

document.getElementById("download").onclick = function(){
        location.href = "/download"
    }

然后是下载文件页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载文件</title>
</head>
<body>
    {{each files}}
    <a href="/download/{{$value}}">{{$value}} 点击下载</a>
    {{/each}}
</body>
</html>

这里的files是将来要渲染的，渲染内容从文件存储的文件夹里面读取。然后渲染下载页面：

app.get("/download",function(req,res){
  fs.readdir("./public/upload",function(err,data){
    if(err){
      console.log(err)
    }else{
      res.render("download.html",{
        files:data
      })
    }
  })
})

接着实现下载功能：

app.get("/download/:name",function(req,res){
  let str = "./public/upload/" + req.params.name;
  res.download(str);
})

以上是教师上传文件和学生下载文件功能的实现。

spring__festival

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web大作业（3）文件的上传和下载

首先是老师的用户界面和学生的用户界面，根据作业要求我设计了如下功能：老师界面的body：<h1>你好，老师，你可以：</h1> <button id="upload">上传文件</button> <button id="live">直播</button> <button id="problem">出题目</button> <button id="exit">退出登录
复制链接

扫一扫