如何解决node.js中fs.rename文件跨域问题_OnlyLove_KD的博客-CSDN博客前言   最近在学习node.js,今天在写一个文件上传的功能,调用fs.rename上传文件时程序报了错。https://blog.csdn.net/OnlyLove_KD/article/details/76539313?spm=1001.2101.3001.6650.7&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7-76539313-blog-107418556.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7-76539313-blog-107418556.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=10

  1. 前端:文件上传选择打开本机弹窗选择文件,这些是用input标签的file属性来做到的,并非layerui这类弹窗!另外,浏览器打开窗口选择本地文件是无法获取到本地绝对路径的,否则会很不安全,不论在js前端代码,还是后端处理逻辑,都不会体现出前端浏览器选择文件对应本机的绝对目录:

TypeScript
clicked(data) {
    let that = this
    console.warn(data)
    if(data.getTag() == 'appUpload'){
        //如果不想用浏览器input标签和样式,完全可以只用自己的button,点击事件后用代码动态加载input标签不用体现出其界面即可!
        var inputObj=document.createElement('input')
        inputObj.setAttribute('id','file');
        inputObj.setAttribute('type','file');
        inputObj.setAttribute('name','file');
        inputObj.setAttribute("style",'visibility:hidden');
        document.body.appendChild(inputObj);
        //调用接口模拟鼠标点击,触发弹出文件选择窗口
        inputObj.click();
        //监听input file的事件,一般就是文件选择变化
        document.querySelector('#file').addEventListener('change', e => {
            //通过FormData来作为表单,注意,肯定不是获取文件的绝对路径
            var formData = new FormData();
            //文件请求
            var xmlHttp = new XMLHttpRequest();
            //事件回调中的文件对象
            var files = e.target.files
            if(files.length > 0){
                formData.append('file',files[0])
                // formData.append('csrfmiddlewaretoken', '{{csrf_token}}')
            }else{
                layui.layer.msg("{% trans '请选择文件' %}")
            }
            function isSubmit(){
                console.log(xmlHttp)
                if(xmlHttp.readyState == 4 ) {
                    layui.layer.confirm(xmlHttp.response, {icon: 3, title:'提示'}, function(index){
                        layui.layer.closeAll();
                    });
                    //为了保证能持续点击,持续执行上传文件,需要把前面创建的dom移除!
                    document.body.removeChild(inputObj)
                }
            }
            var loadingIndex = layui.layer.load(1);
            //POST请求提交
            xmlHttp.open("POST","/adApps/upload");
            xmlHttp.onreadystatechange=isSubmit;
            //表单文件发送
            xmlHttp.send(formData);
        });
    }
}

  1. 后端:接口可以console.log方式打印,虽然代码是混淆过,但是不影响依葫芦画瓢新增post、get接口,并且通过打印传参,来得知传入变量的数据结构接口:

TypeScript
 e.post("/adApps/upload", f, function (req, res) {
    const fs = require('fs')
    console.log(req.files.file)
    // 使用fs模块的rename重命名方法重名字保存的文件,才能正常使用
    //rename('旧文件名,新文件, 回调 ')
    var oldPath = req.files.file.path    //这里是一个目录,并非浏览器前端对应本地机器的绝对目录,而是需要将这个带路径的文件名,重新另存为服务器的某个目录以及新的文件名,实现上传到服务器成功!
    var newPath = __dirname + '/../instance-enjoy/custom/libs/adApps/' + req.files.file.originalFilename

//1)fs.rename方式来接受前端input file模式结合FormData、XMLHttpRequest传递过来,有些目录存储会提示报错:EXDEV: cross-device link not permitted
    // fs.rename(oldPath, newPath, function (err) {
    //     if(err) {
    //         console.warn(err)
    //         res.send('上传失败')
    //     }else{
    //         res.send('上传成功')
    //     }
    //     res.end();
    // })

//2)用如下方式即可解决问题,不再提示报错,并且能后台接收文件保存成功!
    fs.readFile(oldPath, function (err, data) {
        if (err) throw err;
        console.log('File read!');

// Write the file
        fs.writeFile(newPath, data, function (err) {
            if (err) throw err;
            res.write('File uploaded and moved!');
            res.end();
            console.log('File written!');
        });

// Delete the file
        fs.unlink(oldPath, function (err) {
            if (err) throw err;
            console.log('File deleted!');
        });
    })

})

  1. 后端:node文件读取和过滤、筛选(filter)

node文件读取和过滤、筛选(filter)_StarFishing的博客-CSDN博客在node开发过程中,我们经常需要对文件进行读取,写入,以及文件的引入等相关操作和需求,那么我们就需要去读取我们的目录文件,并对其加以过滤,得到我们的目标文件,但是我们要怎么样高效率的进行文件的过滤呢,下面我们介绍了一种方法:首先我们需要导入fs模块,然后用readdirSync列出文件const fs = require('fs');// 先导入fs模块,然后用readdirSync列出文...https://blog.csdn.net/qq_34803821/article/details/84785093

在node开发过程中,我们经常需要对文件进行读取,写入,以及文件的引入等相关操作和需求,那么我们就需要去读取我们的目录文件,并对其加以过滤,得到我们的目标文件,但是我们要怎么样高效率的进行文件的过滤呢,下面我们介绍了一种方法:

首先我们需要导入fs模块,然后用readdirSync列出文件

const fs = require('fs');

// 先导入fs模块,然后用readdirSync列出文件

// 这里可以用sync是因为启动时只运行一次,不存在性能问题:

var files = fs.readdirSync(__dirname + '/controllers');

// controllers可以根据自己项目的目录结构进行更改

然后用filter函数筛选出我们需要的目标文件

这里我们需要的是所有的js文件,我们也可以自己封装函数进行过滤,但是性能上不如底层封装好的函数,即便是自己写了,也要尽量把函数单独抽象出来一个组件,便于复用,减少冗余以及减少一些未知的错误;

// 过滤出.js文件:

TypeScript
var js_files = files.filter((f)=>{
    return f.endsWith('.js');
});

接下来就是对我们过滤出的文件进行符合自己需求的引入和使用

目录下有两个js文件是我们抽象出来的组件化函数,我们按照需要对这两个方法进行引入,js文件格式如下:

TypeScript
var fn_hello = async (ctx, next) => {
    var name = ctx.params.name;
    ctx.response.body = `<h1>Hello, ${name}!</h1>`;
};
module.exports = {
    'GET /hello/:name': fn_hello
};

找到满足条件的文件,并调用相关函数进行业务处理,我们这里就不展示业务处理函数的具体内容,只需要关注怎么对我们过滤出来的js文件进行使用;

// 处理每个js文件:

TypeScript
for (var f of js_files) {
    console.log(`process controller: ${f}...`);
    // 导入js文件:
    let mapping = require(__dirname + '/controllers/' + f);
    for (var url in mapping) {
        if (url.startsWith('GET ')) {
            // 如果url类似"GET xxx":
            var path = url.substring(4);
            router.get(path, mapping[url]);
            console.log(`register URL mapping: GET ${path}`);
        } else if (url.startsWith('POST ')) {
            // 如果url类似"POST xxx":
            var path = url.substring(5);
            router.post(path, mapping[url]);
            console.log(`register URL mapping: POST ${path}`);
        } else {
            // 无效的URL:
            console.log(`invalid URL: ${url}`);
        }
    }
}

到这里我们就基本了解了如何去读取文件,并且按照自己的需要进行过滤,以上过程仅仅是给刚接触或者不清楚怎么样过滤文件的同学提供一个思路,了解基本过程,具体的使用要结合自己的需求,又或者有更好的方式去实现,也需要大家多探索学习;

组态nodejs的后台server.js,新增post接口,接受前端input file模式上传文件,并接收保存到服务器相关推荐

  1. input file图片上传(使用OSS Javscrtipt 上传到服务器)以及图片裁剪(cropper.js)

    一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...

  2. connect to server 192.168.xxx.xxx:22122 fail 使用FastDFS测试上传文件时报错

    出现这种情况别着急 解决方法: 1.查看.conf文件 检查tracker_server ip地址是否正确 2.虚拟机中查看/etc/fdfs/中的storage.conf和client.conf配置 ...

  3. 关于前端上传文件到后台,文件大小超出限制,导致上传失败的解决办法。

    文章出处:Jiangkuobo,微信:jkb_267460 文章目录 前言 一.使用elementPlus上传图片,出现的问题. 二.验证猜想 1.验证方式: 2.测试结果: 3.我的猜想与验证 三. ...

  4. js上传文件到c 服务器,js上传文件到c服务器

    js上传文件到c服务器 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...

  5. ajax传图片以及后台接收,前端ajax上传文件,图片,后端nodejs接收文件;

    前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端 用普通的ajax没法实现文件上传,只能post, ...

  6. JS中使用FormData上传文件、图片的方法

    参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...

  7. webuploader上传文件,后台Java接收

    前台html页面: <!DOCTYPE html> <html> <head> <title>Insert title here</title&g ...

  8. [原创]使用ajaxFileUpload.js上传文件时附带额外参数。

    最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...

  9. 纯js上传文件 很好用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

最新文章

  1. Matlab系统信息、系统命令和跨平台
  2. 使用编码的 UI 测试来测试 Windows 应用商店应用
  3. 在MFC单文档中,如何操作状态栏
  4. 在 Wi ndows,MSComm控件在中文Wi的ndows下的通信问题与处理方法.doc
  5. mysql 设置事物自动提交_mysql事务自动提交的问题
  6. Android开发与Sequoyah的安装问题
  7. 六级词汇打卡第二天(二)
  8. python读取一个文件的大小_Python-读取文件的大小
  9. 关联容器——map、set
  10. android微信第三方登录怎么通过code获取openid?
  11. java判断五位数回文数_【视频+图文】Java经典基础练习题(五):键盘输入一个五位数,判断这个数是否为回文数...
  12. Qt 5.9.0安装教程
  13. 共享图书管理系统数据库实现
  14. R语言自动提取新闻摘要的简单实现
  15. 张忠谋今日正式退休,已为台积电布局好下一个十年
  16. MATLAB群智能开源第十五期-闪电优化算法(LAPO)
  17. 排名趋于稳定后,最新的博主排名(TOP10)
  18. mahout类似的开源项目
  19. Dubbo3.0系列(6)- Dubbo3.0支持的RPC协议
  20. WRFDA教程:3DVar同化卫星辐射率资料

热门文章

  1. 把上面的苹果咬掉一口,再打印
  2. pip install pulp出错
  3. ROS2初级知识(6):Action服务概念
  4. c语言请你为儿童专门设计定制一款专门测试算术能力的软件,莆田学院《C语言程序设计》模拟试卷-03-.doc...
  5. 上下文菜单ContextMenu
  6. Overleaf:一个记笔记、写论文的神器
  7. 明日之后安卓版即将公测 带你全面了解
  8. 板式橡胶支座弹性模量怎样计算_板式橡胶支座的设计计算及选定方法
  9. 苹果Instruments性能调试工具概述
  10. python结巴分词 每个词一行,python结巴分词词云图