• Mongoose应用和文件文件的上传和下载

    一、Express框架访问MongoDB数据库

    1、目的：

    ​ （1）mongoose模块的使用

    ​ （2）学会代码的封装：dao层、service层、接口层

    ​ （3）MVC设计思想：M(Model)、V(View)、C(Controller)

    2、设计思路：

    ​ （1）数据库：blog集合（blogId、title、content、type、author、createAt）

    ​ （2）创建Dao层：创建Schema —-> 创建模型Model —-> 操作数据库中的blog集合

    ​ （3）创建Service层：调用dao层访问数据库、接收客户端的数据、把处理的结果响应给客户端

    ​ （4）创建接口层：路由接口（路由中间件）

    ​ （5）测试接口

    ​ （6）创建前端页面

    ​ （7）实现blogId的自增

    3、代码实现

    ​ （1）创建Express项目：确定端口号、跨域的设置、代码更新能自动重启

    ​ （2）项目目录结构的设置：

            ​ dao（config、model、crud）

            ​ service

    ​ （3）安装mongoose、定义配置文件(连接数据库)

     

    二、node实现文件上传

    1、FormData对象：

    以对象的方式来表示页面中的表单，又称为表单对象。以key-value的方式来保存数据，XMLHttpRequest对象可以轻松的表单对象发送的服务器端

    ​ （1）是一个构造函数：new FormData()，例如：

    var  formdata = new FormData(form)  //将页面中的表单form转换成FormData对象(即将表单数据转换成key-value对)

    （2）常用的API：

            ​ FormData.append(key，value)：追加数据。向formdata中追加key-value

            ​ FormData.get(key)：获取key对应的值

            ​ FormData.delete(key)：删除key对应的值

            ​ FormData.has(key)：判断formdata中是否有key

    2、node使用formidable模块实现文件上传

    ​ （1）安装：npm install formidable

    ​ （2）创建Formidable.IncomingForm对象：本质是一个表单对象

                    ​ let form = new Formidable.IncomingForm()

    ​ （3）Formidable.IncomingForm对象的属性：

             form.encoding ： 设置字符集

            ​ form.uploadDir：设置上传文件的保存路径

            ​ form.keepExtensions：true，表示上传时保留原来的扩展名

    ​ （4）Formidable.IncomingForm对象的方法：

            ​ form.parse(request, [callback])：转换请求中的表单数据

    ​ （5）Formidable.File对象的属性

            ​ size：上传文件的大小

            ​ path：上传文件的路径

            ​ type：上传文件的类型

            ​ name：上传的文件名

    3、示例：

    ​ （1）前端：

    2.     
    3.  
    4.     <label for="">
    5.         请选择文件:
    6.         <input type="file" id="file" />
    7.     label>
    8.     <br /><br />
    9.     <div id="box">div>
    10.     <script>
    11.         $(function () {
    12.             // 创建formdata对象
    13.             let formdata = new FormData();
    14.             // 给file控件绑定change事件
    15.             $("#file").change(function () {
    16.                 //1.获取input中得到的文件名
    17.                 if ($("#file").val().length) {
    18.                     //如果用户选择了文件
    19.                     // 获取文件名
    20.                     let fileName = $("#file").val();
    21.                     // 获取文件的后缀---扩展名,并将其转换成小写
    22.                     let extenName = fileName.substring(fileName.lastIndexOf("."), fileName.length).toLowerCase();
    23.                     // 判断文件类型
    24.                     if (extenName === ".jpg" || extenName === ".png") {
    25.                         // 追加
    26.                         formdata.append("uploadFile", $("#file")[0].files[0]);
    27.                     } else {
    28.                         alert("文件格式不正确");
    29.                     }
    30.                 }
    31.  
    32.                 //2.向服务器发起上传请求
    33.                 $.ajax({
    34.                     url: "http://127.0.0.1:3000/updown/upload",
    35.                     type: "post",
    36.                     data: formdata,
    37.                     cache: false, //上传时文件不缓存
    38.                     contentType: false, //jQuery不能设置请求头中的contentType
    39.                     processData: false, //jQuery不能处理上传的数据
    40.                     success: function (result) {
    41.                         let img = document.createElement("img");
    42.                         img.style.width = 420 + "px";
    43.                         img.style.height = 260 + "px";
    44.                         img.src = result.path; //path表示是服务器的响应的图片的访问路径
    45.                         $("img").remove(); //有新图片显示时，将原图片删除
    46.                         $("#box").append(img);
    47.                     },
    48.                     error: function (err) {
    49.                         console.log(err);
    50.                     }
    51.                 });
    52.             });
    53.         });
    54.     script>

     （2）后台（上传-下载服务器）

    1. //上传接口：http://localhost:8089/updown/upload
    2. router.post('/upload',(req, res) => {
    3.       // 1.设置上传文件的保存路径：上传文件夹
    4.     let cacheFolder = 'public/images/uploads'
    5.       // 2.判断上传文件夹是否存在，若不存在则创建
    6.     if (!fs.existsSync(cacheFolder)){ //同步判断
    7.         fs.mkdirSync(cacheFolder) //同步创建
    8.     }
    9.       // 3. 创建form对象接收客户端的formdata中的数据：使用formidable模块的IncomingForm
    10.     let form = new formidable.IncomingForm()
    11.     form.encoding = 'utf-8' //设置表单域的字符集
    12.     form.uploadDir = cacheFolder //设置上传目录
    13.     form.keepExtensions = true //保留上传文件的后缀
    14.     form.maxFieldsSize = 2 * 1024 * 1024 // 1K=1024B   1M=1024K
    15.     form.type = true //上传文件的类型为只读
    16.       // 4.接收上传文件并进行处理
    17.     let displayUrl; //上传的文件在服务器端的访问路径
    18.     form.parse(req,function (err,fields,files){ //files是前端的formdata对象
    19.         if (err){ //表示上传错误
    20.             res.send(err)
    21.             return
    22.         }
    23.         let extName='' //存放上传文件的后缀(扩展名)
    24.         switch(files.uploadFile.mimetype){ //uploadFile对应的是前端formdata中的key，mimetype表示上传文件的类型
    25.             case 'image/jpg':
    26.                 extName = '.jpg'
    27.                 break
    28.             case 'image/jpeg':
    29.                 extName = '.jpg'
    30.                 break
    31.             case 'image/png':
    32.                 extName = '.png'
    33.                 break
    34.         }
    35.         //5. 对上传文件的后缀进行处理
    36.         if(extName.length == 0){
    37.             res.send({
    38.                 code: 202,
    39.                 msg: '只能上传jpg和png格式的文件'
    40.             })
    41.         }else{ //符合上传要求的文件
    42.            // 5.1 将上传文件和上传的文件名进行拼接
    43.             let savePath = form.uploadDir + '/'+ files.uploadFile.originalFilename //originalFilename表示上传文件的原名
    44.             displayUrl = `http://localhost:8089/images/uploads/${files.uploadFile.originalFilename}`
    45.             //5.2 对文件重命名
    46.             //files.uploadFile.filepath : C:\fakepath\2.png
    47.             //savePath:D:\woniu\Web前端11期\12-2\demo\up-down\public\images\uploads\2.png
    48.             fs.renameSync(files.uploadFile.filepath,savePath) //用savePath替换filePath,方法必须是同步方法
    49.             res.json({
    50.                 code: 202,
    51.                 path: displayUrl
    52.             })
    53.         }
    54.     })
    55. })

    4、文件上传需要注意的问题

    ​ （1）前端FormData对象作用：用于保存上传文件的信息。格式：key-value

    ​ （2）后台formidable模块的作用：使用parse方法来解析前端的formdata对象

     ​ （3）上传过程中前后端的对应关系

    三、Express实现文件下载

    1、使用res对象(响应对象)的download方法即可

    四、遍历下载文件夹下的文件，拼接成一个下载的url，传递到前端

    后台接口：

    1. // 遍历下载文件夹的接口：http://localhost:8089/updown/getfiles
    2. router.get('/getfiles',(req, res) => {
    3.     //1.遍历下载文件夹：public/images/uploads
    4.     let filePath = path.join(__dirname,'../../public/images/uploads/') //下载文件夹
    5.     let url_arr = [] //存放下载的url
    6.     fs.readdir(filePath,(err,files)=>{ //files参数中存放的filePath下的子目录名和文件名
    7.         if (err){
    8.             console.log(err)
    9.         }else{
    10.             for(let i=0;ilength;i++){
    11.                 let fileDir = path.join(filePath,files[i])
    12.                 if (fs.statSync(fileDir).isFile()){ //表示当前的files[i]是一个文件
    13.                     let urlObj = {
    14.                         fileName: files[i],  //文件名
    15.                         downloadUrl: `http://localhost:8089/updown/download?fileName=${files[i]}`
    16.                     }
    17.                     url_arr.push(urlObj) //把要下载的文件路径、文件放入数组中
    18.                 }
    19.             }
    20.             res.json(url_arr)
    21.         }
    22.     })
    23. })

     前端页面：

    2.     <div id="box">div>
    3.     <script src="./js/jquery-3.4.1.js">script>
    4.     <script>
    5.         $(function(){
    6.             $.ajax({
    7.                 url: 'http://localhost:8089/updown/getfiles',
    8.                 type:'get',
    9.                 dataType:'json',
    10.                 success: function(result){
    11.                     for(let data of result){
    12.                         $('#box').append(`${data.downloadUrl}>下载${data.fileName}`)
    13.                                  .append('

      '      )
    14.                     }
    15.                 }
    16.             })
    17.         })
    18.     script>
    19. body>
  • 相关阅读:
    全网最全 Chrome浏览器插件推荐大全 持续更新中
    nexus搭建npm依赖私库
    java8日期时间格式化与解析
    分享一个连接远端计算机与传输文件的脚本
    MySQL数据库的卸载
    基于html+css+javascript+jquery制作北京景点介绍7页 WEB静态旅游景点区主题网页设计与制作
    程序员没有工作经验怎么办？能不能找到工作？
    【一行记录】达梦timestamp转yyyy-mm-dd
    传感器工作原理
    小程序赖加载刷新数据页面数据堆叠问题debug
  • 原文地址：https://blog.csdn.net/m0_74331160/article/details/128164914