## 场景说明
很多时候需要对上传的图片进行信息校验，例如文件大小，图片名称、长宽等属性

文件大小、名称通过 file 对象本身就可以获得到。
图片的长、宽则需要通过读取图片本身获取



## 代码示例

```js
// 假设这里已经拿到了上传文件 file

//读取图片数据
const reader = new FileReader();
reader.onload = function (e:any) {
  const data = e.target.result;
  //加载图片获取图片真实宽度和高度
  const image = new Image();
  image.src = data;
  // 因为 image 不是赋予属性就可以直接拿到长宽属性的，所以要加上监听
  image.onload = function () {
    const width = image.width;
    const height = image.height;
    const sizeAllow = width <= 1024 && height <= 1024;
    if (sizeAllow) {
      // 触发上传
    } else {
      Modal.warning({
        title: '提示',
        content: '上传图片长宽不可超过 1024px',
      })
    }
  };
};
reader.readAsDataURL(file);  
```

前端读取上传的文件长宽

## nvm-windows 项目地址
[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)




## 安装 nvm

### 下载 nvm
![image.png](https://oss.silon.vip/img/9862a0ed13a5a8a73d5e308f4bffe959.image.png)



点击 `nvm-setup.exe` 下载并安装

### 安装 nvm

![image.png](https://oss.silon.vip/img/0ae1a2ebfc71abffa94f2b49eae55a34.image.png)

此处为 nvm 管理器的路径


![image.png](https://oss.silon.vip/img/911a01f8493455dea431757e2414b3c4.image.png)
此处为 nodejs 的存储路径


![image.png](https://oss.silon.vip/img/a4eef4f500b107ace71bb6619936eae2.image.png)

一路继续完成安装即可

### 验证安装

在命令行中输入 `nvm`，看到命令提示，说明安装成功
![image.png](https://oss.silon.vip/img/5c2ab5239461772442d1968410d0a55b.image.png)

## 配置 nvm

打开nvm安装目录下的`settings.txt`文件，设置国内镜像

```
node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
```

第一行是nvm安装路径
第二行是nodejs路径
第三行是node下载镜像
第四行是npm下载镜像

![image.png](https://oss.silon.vip/img/571f82415048ea8664bbd6351480f355.image.png)

## nvm 常用命令

```
nvm list available       //列出node可安装版本
nvm install --lts        //安装最新LTS版本
nvm install <version>    //安装指定版本
nvm install node         //安装最新node
nvm uninstall <version>  //卸载指定版本
nvm ls                   //查看已安装node版本
nvm use <version>        //切换node版本
```

windows下安装nvm

## pyenv-win 项目地址

[pyenv项目地址](https://github.com/pyenv-win/pyenv-win#readme)





## 下载项目

将项目代码下载到任意不带有中文的目录下
文件放好位置后双击打开pyenv-win文件夹


![image.png](https://oss.silon.vip/img/020c1fdbb8a135885d1d68a6f12b40be.image.png)
点击此处复制目录


![image.png](https://oss.silon.vip/img/f0ccd58f78215e99a390aa8724a4f987.image.png)


复制此路径，可以点鼠标右键复制或者用快捷键Ctrl+c复制。

## 开始配置环境变量

单击此电脑选中，鼠标右击，单击最下面的属性，会进入设置中系统的关于界面
单击此界面的高级系统设置选项


![image.png](https://oss.silon.vip/img/d7b442b67a83e7e9375847182007a632.image.png)
单击环境变量

![image.png](https://oss.silon.vip/img/e71412e4898fb5ec97d9a263fb0a049e.image.png)

就可以进入到配置环境变量的地方进行环境变量配置


在系统变量中点新建，将pyenv加入系统变量中
按我的这个写，把文件位置改成你们的，点击确认。

![image.png](https://oss.silon.vip/img/f12d98a2d60a67b97649e40d38d17923.image.png)

![image.png](https://oss.silon.vip/img/80330ded65264f96a43945f32c88e96e.image.png)
在系统变量中找到Path这个变量，双击打开

![image.png](https://oss.silon.vip/img/cf82e04cbea374b6384c3aeba7b0e4f9.image.png)

将这两行路径加进去：%PYENV%\bin %PYENV%\shims ，然后点击确定，点击完里面的确定再点击环境变量的确定


![image.png](https://oss.silon.vip/img/7bcac27ee704a2ce0fa7f15d068db86f.image.png)

![image.png](https://oss.silon.vip/img/aaff5118a931446dffe8070d00edbb90.image.png)
最后点击最外面的确定

![image.png](https://oss.silon.vip/img/7a4ec13d35a8ef8453d584027f7d3881.image.png)

到这一步环境变量就配置好了，名义上来说也就安装好了

## 验证pyenv是否已经安装成功
在键盘上点击`win+r`键启动运行窗


在运行窗中输入`cmd`，然后点击确认

![image.png](https://oss.silon.vip/img/3fae188f90fce110db4089417213e90c.image.png)

进入到系统自带的命令行程序，输入`pyenv`


![image.png](https://oss.silon.vip/img/e451040bd420606d056967202019ba81.image.png)
出现此界面代表安装成功


## 安装 python 后命令行输入 python 无效的解决方法

如果通过 pyenv安装 Python后，发现输入 Python 会调起应用商店或提示找不到命令。

系统设置中，找到 `应用执行别名`，取消 python 的勾选

![image.png](https://oss.silon.vip/img/a4c818da174fe4e886574efb640ee4e6.image.png)

这时就可以输入`python`调用了

## pyenv简单的使用教程
pyenv使用
1、查看所有pyenv可以安装的版本：pyenv install --list
2、安装之前修改源：
①.pyenv文件下的.versions_cache.xml
②将想要下载的版本对应的url改为对应的https://npm.taobao.org/mirrors/python/3.8.0/python-3.8.0-amd64-webinstall.exe，只替换到python位置即可，后面的还按照原本的，不要动
3、改完后安装使用命令：pyenv install 3.9.0–对应版本
4、查看pyenv下所有的python安装版本：pyenv versions
5、跳转到对应版本：pyenv local 3.9.0
：pyenv install 3.9.0–对应版本
4、查看pyenv下所有的python安装版本：pyenv versions
5、跳转到对应版本：pyenv local 3.9.0
5、查看当前对应版本：pyenv version

windows下安装pyenv

## 场景描述
在日常使用命令npm install / npm install XX下载依赖的操作中，我经常会遇到无法解析依赖树的问题（依赖冲突）


![image.png](https://oss.silon.vip/img/4259ba5e647b4df21847b05725e83953.image.png)




## 解决方法 --legacy-peer-deps

在NPM v7中，现在默认安装peerDependencies。

在很多情况下，这会导致版本冲突，从而中断安装过程。

`--legacy-peer-deps`标志是在v7中引入的，目的是绕过peerDependency自动安装；

它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。

## 原理说明

在package.json文件中，存在一个叫做peerDependencies（对等依赖关系）的对象，它包含了项目里需要的所有的包或则用户正在下载的版本号相同的所有的包（很绕，但意思就是对等依赖关系指定我们的包与某个特定版本的npm包兼容）；对等依赖关系最好的例子就是React，一个声明式的创建用户界面的JS库。

假设我们现在有一个HelloHWCloud工程，已经在其根目录下的package.json文件中的dependencies字段里声明了packageA作为依赖，而其下面有两个项目app_A和app_B，它们也依赖packageA。如果我们用dependencies而不是peerDepenedencies来声明，那么npm install安装完项目之后的依赖结构如下图所示：


![image.png](https://oss.silon.vip/img/33e0e02954643b24cc08cf3f1cdfccf9.image.png)

从上图可以看出，packageA依赖包被安装了3次，造成了2次安装冗余。

而如果采用peerDepenedency来下载，就可以避免这个核心依赖库被重复下载的问题。还是上面那个场景，我们在项目app_A和app_B的package.json文件里的peerDependencies字段声明一下核心依赖库packageA，然后在根目录的package.json文件里的dependencies字段也声明一下packageA。接着再执行npm install，生成的依赖结构就会如下图所示


![image.png](https://oss.silon.vip/img/9d63a2283f0a2748c39b26c9ba7d1eec.image.png)

如上图所示，packageA就只会被安装一次。因此，npm 从版本v7开始，install就默认以peerDependencies的方式去下载了：

如果用户在根目录的package.json文件里显式依赖了核心库，那么各个子项目里的peerDepenedencies声明就可以忽略
如果用户没有显式依赖核心库，那么就按照子项目的peerDepenedencies中声明的版本将依赖安装到项目根目录里
而方式2就会导致一个问题：用户依赖的包版本与各个子项目依赖的包版本相互不兼容，那么就会报错（无法解析依赖树的问题（依赖冲突））让用户自行去修复，因而导致安装过程的中断。（因为是从npm v7引入的，因此npm v3-v6就不会发生这个错误）

npm install --legacy-peer-deps 的作用

## React 默认启动逻辑

React 创建工程以 
```
react-scripts start
```
启动开发服务器；默认情况下是以 3000 作为服务器端口；

## 自定义启动端口

如果需要自定义设置端口 可以通过修改 `process.env.PORT` 实现





### 控制台启动时指定

```
// 设置端口是 8888
// 二选一都可以
PORT=8888 yarn react-scripts start
PORT=8888 npm react-scripts start
```

### 在 package.json 的scripts 中指定

```
// 在 window 环境下
// 通过 set 指令实现
"scripts": {
    "start": "set PORT=8888 && react-scripts start",
},

// 在 mac 环境下
"scripts": {
    "start": "PORT=5000 react-scripts start",
},
```

### 通过 cross-env 协助制定

```
# 安装 cross-env
npm install cross-env -g
```

```
"scripts": {
    "start": "cross-env PORT=5000 react-scripts start",
    //...
}
```