前端上传文件夹及其所有子文件夹和文件

8 篇文章 0 订阅
7 篇文章 2 订阅

文章目录

思路:用fs.readdir得到当前文件夹的所有子文件和子文件夹,再用fs.stat里面的 isFile()和isDirectory() 去判断文件还是文件夹,注意是方法,然后去做相应的操作

注意应用 fs
(var path = require(‘path’);
var fs = require(‘fs’);)

var fs = require('fs');
var http = require('http');
var FormData = require('form-data');
dirpath:文件夹的路径(eg:D:\Program Files)
    function fileDisplay(dirpath: any) {

        fs.readdir(dirpath, (err: any, files: any) => {

            if (err) {
                console.log(err)
            } else {
                files.forEach((filename: any) => {

                    var filedir = dirpath + "\\" + filename;
                    console.log('asdf', filedir);

                    fs.stat(filedir, (error: any, stats: any) => {

                        if (error) {
                            console.log(error);
                        } else {
                            console.log("666:", stats);
                            var isFile = stats.isFile();
                            var isDir = stats.isDirectory();

                            if (isFile) {

                                sendFile(filedir)

                            }

                            isDir ? fileDisplay(filedir) : ''
                        }

                    })

                })

            }

        })

    }
    /* filedir:文件的路径 */
    const sendFile = (filedir: any) => {
        var form = new FormData();
        form.append('manyFolder', fs.createReadStream(filedir));//'file'是服务器接受的key

        var headers = form.getHeaders();//这个不能少
        // headers.Cookie = cookie;//自己的headers属性在这里追加

        // debugger

        
        let host = VITE_APP_URL.split('//')[1].split(':')[0]
        let port = VITE_APP_URL.split('//')[1].split(':')[1].substring(0,4)

        var request = http.request({
            method: 'post',
            host,
            port,
            path: '/fs/fileUpdate',
            headers: headers
        }, function (res: any) {
            var str = '';
            res.on('data', function (buffer: any) {
                str += buffer;//用字符串拼接

                // debugger
            }
            );
            res.on('end', () => {
                var result = JSON.parse(str);
                console.log('suc',result);
                message.success('上传成功')
                // debugger
                //上传之后result就是返回的结果
            });
        });

        form.pipe(request);
    }
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript 本身是不能将文件保存到指定的文件夹中的,这是由于浏览器的安全机制所限制的。如果 JavaScript 能够随意地在用户的计算机上创建和操作文件,那么就会带来很大的安全风险。 不过,你可以使用一些技术来实现类似的功能。例如,可以使用服务器端的脚本语言(如 PHP、Node.js 等)来接收前端上传的文件,并将其保存到指定的文件夹中。具体的实现方式,可以参考以下步骤: 1. 在前端页面中,使用 `input` 元素的 `type="file"` 属性创建一个文件上传框,让用户选择要上传的文件。 ```html <input type="file" id="fileInput"> ``` 2. 使用 JavaScript 获取上传框中选择的文件,并将其发送到服务器端。 ```javascript var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0]; var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); var formData = new FormData(); formData.append('file', file); xhr.send(formData); ``` 3. 在服务器端接收上传的文件,并将其保存到指定的文件夹中。 以 Node.js 为例,可以使用 `fs` 模块中的 `createWriteStream` 方法来创建一个可写流,将上传的文件写入到指定的文件夹中。 ```javascript const fs = require('fs'); const path = require('path'); const express = require('express'); const app = express(); app.post('/upload', (req, res) => { const file = req.files.file; const filePath = path.join(__dirname, 'uploads', file.name); const writeStream = fs.createWriteStream(filePath); file.pipe(writeStream); writeStream.on('finish', () => { res.send('上传成功!'); }); }); app.listen(3000, () => { console.log('服务器启动成功!'); }); ``` 在这个例中,我们将上传的文件保存到了 `uploads` 文件夹中。当文件上传完成后,服务器会返回一个成功的响应。需要注意的是,这里使用了 `pipe` 方法将文件的可读流和可写流连接起来,实现了文件的写入操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜空孤狼啸

你的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值