欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端Node实现简易的文件上传下载

程序员文章站 2022-06-25 08:43:40
前端代码 文件名:register.html NodeJS代码 下载所需要的模块 ......

前端代码

文件名:register.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
</head>
<body>
    <input type="file" id="upfile">
    <button onclick="submit()">提交</button>
    <img src="#" alt="" id="img">
    <a href="" id="download" download="a.jpg">点我下载</a>
    <script>
        
        function submit () {
            var img = document.getelementbyid('img');
            var download = document.getelementbyid('download');

            var file = document.getelementbyid('upfile');
            //利用htmlapi formdata
            var formdata = new formdata();
            formdata.append('img',file.files[0]);

            //发送请求
            var xhr;
            if (window.xmlhttprequest) {
                xhr = new xmlhttprequest();
            } else {
                xhr = activexobject();
            }
            xhr.open('post','/imgdata',true);
            xhr.onreadystatechange = function () {
                if (xhr.readystate == 4 && xhr.status == 200) {
                    var res = json.parse(xhr.responsetext);
                    // 这一步,将上传成功之后,后端传回来一个地址,继续发送请求数据,后端只管读取数据返回就行,浏览器会自动识别
                    img.src = '/getimgdata?path=' + res.path;
                    //下载,给a标签加上一个download属性就行,后端只管读取数据返回
                    download.href = '/getimgdata?path=' + res.path;

                }
            }
            xhr.send(formdata);
        }
        
    
    </script>
</body>
</html>

nodejs代码

下载所需要的模块

npm install express
npm install multer
var express = require('express');
var url = require('url');
var fs = require('fs');
var multer = require('multer');  //处理上传的文件模块
var app = new express();

var uploadsingle = multer({dest: './uploadfile/'}); //dest: 配置默认上传之后存储的文件夹


//这个返回的前端代码页面
app.get('/login',function (req,resp) {
    var loginhtml = fs.readfilesync('./register.html');
    resp.end(loginhtml);
})


//处理多张图片上传的时候,用uploadsingle.array('img),则request.file得到的是一个数组
//single里面的'img'要与前端上传时的name属性的值一致
app.post('/imgdata',uploadsingle.single('img'),function (request,response) {
    // 上传之后会自动保存到定义的文件夹下,一些相关信息在request.file当中
    var path = request.file.path;

    // ...存储到数据库等操作,把得到的存储地址返回给前端,用于后面前端好发送请求读取数据
})

app.get('/getimgdata',function (request,response) {
    //得到前端传递过来的要读取的文件的路径
    var path = url.parse(request.url,true).query;

    try {
        var data = fs.readfilesync(path);
        //返回读取到的数据
    }catch(e) {
        //读取发生错误。。
    }
   
})


app.listen(8081,function () {
    console.log('服务已启动');
})