言

之前在做webpack配置时候多次用到路径相关内容。最近在写项目的时候，有一个文件需要上传到阿里云oss的功能，同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块，所以系统的学习了一下，整理了这篇文章。

node中的路径分类

node中的路径大致分5类，dirname,filename,process.cwd(),./,../,其中dirname,filename,process.cwd()绝对路径

通过代码对每个分类进行说明：

文件目录结构如下：

代码pra/
 - node核心API/
 - fs.js
 - path.js

path.js中的代码

const path=require('path');
console.log(__dirname);
console.log(__filename);
console.log(process.cwd());
console.log(path.resolve('./'));

在代码pra目录下运行命令 node node核心API/path.js，我们可以看到结果如下：

/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js
/koala/Desktop/程序员成长指北/代码pra
/koala/Desktop/程序员成长指北/代码pra

然后我们有可以在node核心API目录下运行这个文件，node path.js,运行结果如下：

/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js
/koala/Desktop/程序员成长指北/代码pra/node核心API
/koala/Desktop/程序员成长指北/代码pra/node核心API

对比输出结果，暂时得到的结论是

• __dirname: 总是返回被执行的 js 所在文件夹的绝对路径
• __filename: 总是返回被执行的 js 的绝对路径
• process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
• ./: 跟 process.cwd() 一样，返回 node 命令时所在的文件夹的绝对路径

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

为什么说上面是暂时得到的结论，因为是有错误的，再看一段代码：我们在path.js中加上这句代码

exports.A=1;

之前直接通过readFile读取文件路径报错，

fs.readFile('./path.js',function(err,data){
 
});

现在在刚才报错的fs.js里面加这两句代码看看：

const test=require('./path.js');
console.log(test)

在代码pra/目录下运行node node核心API/fs.js，最后查看结果，说明是可以访问到的：

{ A: 1 }

那么关于 ./正确的结论是：

在 require()中使用是跟__dirname 的效果相同，不会因为启动脚本的目录不一样而改变，在其他情况下跟 process.cwd() 效果相同，是相对于启动脚本所在目录的路径。

路径知识总结：

• __dirname：获得当前执行文件所在目录的完整目录名
• __filename：获得当前执行文件的带有完整绝对路径的文件名
• process.cwd()：获得当前执行node命令时候的文件夹目录名
• ./：不使用require时候，./与process.cwd()一样，使用require时候，与__dirname一样

只有在 require() 时才使用相对路径(./, ../) 的写法，其他地方一律使用绝对路径，如下：

// 当前目录下
 path.dirname(__filename) + '/path.js';
// 相邻目录下
 path.resolve(__dirname, '../regx/regx.js');

path

前面讲解了路径的相关比较，接下来单独聊聊path这个模块，这个模块在很多地方比较常用，所以，对于我们来说，掌握他，对我们以后的发展更有利，不用每次看webpack的配置文件还要去查询一下这个api是干什么用的，很影响我们的效率

这是api官网地址:https://nodejs.org/api/path.html

个人认为官网中的api没有必要都掌握，下面会对一些常用的api进行讲解，我经常用到的，或者作为一个前端开发工程师在webpack等工程配置的时候经常用到的。

path.normalize

举例说明

const path=require('path');

console.log(path.normalize('/koala/Desktop//程序员成长指北//代码pra/..'));

规范后的结果

/koala/Desktop/程序员成长指北/代码pra

作用总结

规范化路径，把不规范的路径规范化。

path.join

举例说明：

const path=require('path');
console.log(path.join('src', 'task.js'));

const path=require('path');
console.log(path.join(''));

转化后的结果

src/task.js
.

作用总结

path.join([...paths])

1. 传入的参数是字符串的路径片段，可以是一个，也可以是多个
2. 返回的是一个拼接好的路径，但是根据平台的不同，他会对路径进行不同的规范化，举个例子，Unix系统是/，Windows系统是\，那么你在两个系统下看到的返回结果就不一样。
3. 如果返回的路径字符串长度为零，那么他会返回一个.，代表当前的文件夹。
4. 如果传入的参数中有不是字符串的，那就直接会报错

path.parse

举例说明

const path=require('path');
console.log(path.parse('/koala/Desktop/程序员成长指北/代码pra/node核心API'));

运行结果

{ root: '/',
 dir: '/koala/Desktop/程序员成长指北/代码pra',
 base: 'node核心API',
 ext: '',
 name: 'node核心API' 
}

作用总结

他返回的是一个对象，那么我们来把这么几个名词熟悉一下：

1. root：代表根目录
2. dir：代表文件所在的文件夹
3. base：代表整一个文件
4. name：代表文件名
5. ext: 代表文件的后缀名

path.basename

举例说明

const path=require('path');
console.log(path.basename('/koala/Desktop/程序员成长指北/代码pra/node核心API'));
console.log(path.basename('/koala/Desktop/程序员成长指北/代码pra/node核心API/path.js', '.js'));

运行结果

看了上面代码的例子，我想应该知道了basename结果，嘿嘿。

node核心API
path

作用总结

basename接收两个参数，第一个是path，第二个是ext(可选参数)，当输入第二个参数的时候，打印结果不出现后缀名

path.dirname

举例说明

const path=require('path');
console.log(path.dirname('/koala/Desktop/程序员成长指北/代码pra/node核心API'));

运行结果

/koala/Desktop/程序员成长指北/代码pra

作用总结

返回文件的目录完整地址

path.extname

举例说明

const path=require('path');
path.extname('index.html');
path.extname('index.coffee.md');
path.extname('index.');
path.extname('index');
path.extname('.index');

运行结果

.html
.md
.
''
''

作用总结

返回的是后缀名，但是最后两种情况返回'',大家注意一下。

path.resolve

举例说明

const path=require('path');
console.log(path.resolve('/foo/bar', '/bar/faa', '..', 'a/../c'));

输出结果

/bar/c

作用总结

path.resolve([...paths])

path.resolve就相当于是shell下面的cd操作，从左到右运行一遍cd path命令，最终获取的绝对路径/文件名，这个接口所返回的结果了。但是resolve操作和cd操作还是有区别的，resolve的路径可以没有，而且最后进入的可以是文件。具体cd步骤如下

cd /foo/bar/ //这是第一步, 现在的位置是/foo/bar/
cd /bar/faa //这是第二步，这里和第一步有区别，他是从/进入的，也就时候根目录，现在的位置是/bar/faa
cd .. //第三步，从faa退出来，现在的位置是 /bar
cd a/../c //第四步，进入a，然后在推出，在进入c，最后位置是/bar/c

path.relative

举例说明

const path=require('path');

console.log(path.relative('/data/orandea/test/aaa', '/data/orandea/impl/bbb'));

console.log(path.relative('/data/demo', '/data/demo'));

console.log(path.relative('/data/demo', ''));

运行结果

../../impl/bbb
 ""
 ../../koala/Desktop/程序员成长指北/代码pra/node核心API

作用总结

path.relative(from, to)

描述：从from路径，到to路径的相对路径。

边界：

• 如果from、to指向同个路径，那么，返回空字符串。
• 如果from、to中任一者为空，那么，返回当前工作路径。

总结

本篇文章关于路径的知识就说到这里，基础很重要的，既能节约开发时间，又能减少报错。

原文链接：https://mp.weixin.qq.com/s/CPYa7YjQDJGYWzKwTox5Rg
作者：程序员成长指北

题从何而来

在做解除摄像头设备占用时，遇到了一个棘手的问题，就是视频窗口页面有太多的 video 标签交错使用。

利用 stream.disposeMediaStream() 这种方法已经无法有效关闭占用摄像头的权限，于是想到通过 “退出视频窗口进行刷新” 的方式来解决摄像头设备被占用的问题。

首先，刷新的几种方法

1.this.$router.go(0)

go 函数的用法需要带参数，例如 go(-1) 表示返回上一页，go(0) 跟第2种方法差不多。

2.location.reload()

重新加载页面。

3.provide/inject

在 App.vue，声明 reload 方法，控制 router-view 的显示或隐藏，从而控制页面的再次加载。

使用 file 模式的访问方式

以上几种方法在 dev 开发环境下，利用 http 路径访问是没有问题的。

但经过打包处理后，访问的路径改为 file 模式，那以上的刷新就会直接再次去访问 index.html 文件，等于回到了首页，并没有停留在之前的页面，所以需要做一些处理来解决这个问题。

1、利用 electron-store 插件来缓存登录数据

import ElectronStore from "electron-store"; 
export const store=new ElectronStore();

将登录状态记录下来，如下：

store.set("logined",1);

2、返回页面，进行刷新释放摄像头设备

if(store.get("logined")==1){
window.location.reload(true);
}

3、进入到登录页，脚本自动登录

if(store.get("logined")==1){
this.$store.dispatch("user/login", this.loginForm).then(()=> {
  store.set("logined",0);
  ipcRenderer.send("mainWindow");   this.$router.push({
   path: "/path",
   query: this.otherQuery,
   });
   }).catch((err)=> {   console.log(err);
   });
}

小结

使用 getUserMedia 调用过的摄像头设备，若出现无法释放的情况，大家可以尝试一下这种方法。以上就是本期刷新 electron 页面的分享，希望能给大家带来帮助。

下期给大家分享更多实战中的点滴，如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！

Flask中，文件上传通常涉及创建一个表单，用户可以通过这个表单上传文件。然后，后端代码会处理接收到的文件。以下是实现文件上传功能的步骤：

创建HTML表单 - 使用标签创建一个表单，设置enctype="multipart/form-data"属性以支持文件上传。

File Upload

创建Flask路由 - 定义一个处理文件上传的路由。

from flask import Flask, request, redirect, url_for, send_from_directory

app=Flask(__name__)

@app.route('/upload', methods=['GET', 'POST'])

def upload_file():

if request.method=='POST':

file=request.files['file']

if file and '.jpg' in file.filename:

# 保存上传的文件

filename='uploads/' + file.filename

file.save(filename)

# 重定向到文件上传后的页面

return redirect(url_for('success', filename=filename))

return '''

'''

@app.route('/success/')

def success(filename):

# 返回上传成功的页面，显示文件名和下载链接

return f'File uploaded successfully: Download {filename}'

@app.route('/download_file/')

def download_file(filename):

return send_from_directory(app.root_path + '/uploads', filename)

if __name__=="__main__":

app.run()

处理上传的文件 - 在Flask视图函数中，通过request.files字典访问上传的文件。

保存上传的文件 - 将上传的文件保存到服务器的指定目录中。

重定向或返回上传结果 - 一旦文件被保存，可以重定向用户到一个新页面，显示上传成功的信息，或者直接在原页面显示上传结果。

提供下载链接 - 为了让用户能够下载上传的文件，可以创建一个路由来提供文件的下载服务。在示例中，使用了send_from_directory函数来实现。

确保服务器上的目标目录对于Web服务是可写的，并且处理上传的代码要考虑安全性，比如检查文件类型、大小，防止上传恶意文件。此外，对于生产环境，应该使用更高级的文件上传处理方案，比如文件存储在外部服务上，以及设置适当的权限和安全措施。