Upload customRequest 事件

Antd CustomRequest Docs

customRequest callback 会返回一个对象

1
2
3

function customRequest(info) {
  const {onProgress, onError, onSuccess, data, filename, file, withCrredentials, action, headers} = info;
}

我们需要用到 onProgress 和 onSuccess 事件。

一般来说自定义上传方法时，可以添加一个 onProgress 事件

1
2
3
4

function onProgress({total, loaded}) {
  const percent = Math.round((loaded / total) * 100).toFixed(2);
  console.log(percent);
}

通过计算 total 和 loaded 可以得出当前进度

然后调用 customRequest info.onProgress

1

info.onProgress({ percent: percent }, info.file);

上传成功后可以在 then 中设置 info.onSuccess

但当设置 fileList 参数时设置进度可能不会生效

这时我们择需要在自定义请求的 onProgress 触发时，重新设置 fileList，并且为当前上传文件的那一项添加 percent 字段手动设置进度

flutter 运行 flutter pub get 提示下面错误

Could not decompress gz stream Connection closed while receiving data, path = ''

解决方法

先执行 flutter clean 然后重新 运行 flutter pub get

安装依赖

1

yarn add gh-pages

新增命令

package.json scripts 中增加：

1

"deploy": "gh-pages -d dist"

其中 dist 指项目打包后的文件夹名称自行更改

步骤

• 打包项目，以项目打包命令为准
• 执行 yarn deploy 或 npm run deploy

1. React.FC<P> / React.FunctionCopmonent<P>
React 函数式组件的泛型接口，一般使用简写 FC，可以接受一个参数 P，用来定义 props 的类型。

2. React.Component<P, S> / React.PureComponent<P, S>
React 类组件的泛型接口，接受两个参数，第一个是 props 的类型定义，第二个是 state 的类型定义。

3. React.ReactElement
   使用React.createElement创建的，可以简单理解为React中的JSX的元素。

4. JSX.Element
   return返回的jsx语法类型。

5. React.ReactNode
<div>node</div> node的合法类型。

6. FormEvent
form 表单的 event 类型。

7. ChangeEvent<e>
onChange 事件触发的 event 泛型接口，可选 HTMLSelectElement、HTMLInputElement 等 html 标签节点类型。

8. RouteComponentProps

9. react-router 中组件的类型接口，包含 history 等路由数据。

其他想到时再补充

最近工作中碰到需要请求远程资源，跨域的问题。每次更改完需要打包项目推到服务器上测试实在是麻烦。

网上一搜刚好有浏览器关闭同源安全策略的方法。

1. 新建一个 chrome 的快捷方式
2. 点击属性，找到目标
3. 在目标值的最后加上 --disable-web-security --user-data-dir=D:\chromedev 代码
4. 点击保存，双击此快捷方式打开

当设置上述命令后，浏览器会提示稳定性和安全性会有所下降。推荐以新建快捷方式的方式设置。

其中 --user-data-dir= 后为本地文件夹路径，设置上述命令后浏览器会将部分数据保存到该文件夹。

理论上 Edge 浏览器也支持该设置。

清除TextField焦点

监听TextField焦点，如何在单击屏幕上的任意位置后隐藏软键盘？

1
2

// 清除焦点
FocusScope.of(context).requestFocus(new FocusNode());

在body中添加点击事件

1
2
3
4
5
6
7
8
9

Scaffold(
  body: new GestureDetector(
    onTap: () {
        FocusScope.of(context).requestFocus(new FocusNode());
      },
    child: new Container(
      // 在此处添加内容
    )
 )

最近有个需求在网页中查看 CAD，引入 CAD SDK 后报错，但在 demo 项目中可以正常使用。

由于 SDK 是商用的，这里就不方便放出。

经过断点调试，输出 response 后发现，正式项目和 demo 项目返回的类型不一样。

正式项目为 MockXMLHttpRequest，而 demo项目为 XMLHttpRequest。

经过搜索，网上提到是 Mockjs 的问题。

下面是查找到的原因。

mockjs踩坑

mockjs原理：
在引入了Mock之后，mock.js内部会创建一个MockXMLHttpRequest来替代原生的XMLHttpRequest，如果有原生的XHR请求来，则拦截，替换成MockXMLHttpRequest对象，然后再匹配对应的url，如果没有，就发送网络请求。

FbxLoader是继承自Three.js的FileLoader对象，调用load方法时，会先判断传入的url是否是Base64格式的DataURI,如果是，则进行解析并返回，如果不是，就创建XHR请求。

到底是哪里出问题了呢？
调试到FbxLoader里，发现在load成功后，得到返回值是buffer，需要进行解析，responseType需要是’arrayBuffer’类型！问题来了，在mockjs的MockXMLHTTP中没有把responseType进行设置，而是设置成了空值，所以，无法解析出buffer对象。

查看正式项目后，发现几乎没有地方使用Mockjs，因此把Mockjs卸载后就可以正常加载 CAD 图纸了。

也有人提到 arrayBuffer 和 blob 类型的数据都会出现问题。

通过设置 Mockjs 而不是卸载来解决问题。

这个方法我没有测试，因此也不保证可用。

1
2
3
4
5
6
7
8
9
10

Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open;
Mock.XHR.prototype.open = function() {
    let responseType = this.responseType;
    this.proxy_open(...arguments)
    if (this.custom.xhr) {
        if (responseType) {
            this.custom.xhr.responseType = responseType
        }
    }
}

今天有个需求需要修改Select组件的arrow图标，经过查询文档得知可通过suffixIcon修改。

注意showArrow的值为true

如下代码，当我修改完成后，点击Select 图标却没有旋转。

1

<Select suffixIcon={<img src="xxxx.png" />} />

查找antd的Issues也没有得到有效的解决方法。

干脆直接对比使用suffixIcon和默认情况下的不同。

找到下面的样式

1
2
3
4
5

.ant-select-open .ant-select-arrow-icon svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

自定义suffixIcon后并没有应用以上样式。其中 ant-select-arrow-icon 为一个i标签，内部是svg标签，而自定义的icon外部并没有包裹此标签。

修改一下suffixIcon的内容并将img换为svg。

1
2
3
4
5
6
7

<Select
  suffixIcon={
    <i className='anticon anticon-down ant-select-arrow-icon'>
      <svg>svg内容</svg>
    </i>
  }
/>

这样就可以正常实现功能了

引入 intl

1
2
3

import { getIntl, getLocale } from 'umi';

const intl = getIntrl(getLocale());

在 function 中使用

1
2
3

function test() {
  return intl.formatMessage({id: 'app.test'});
}

在数组或对象中使用

1
2
3

export default [{
  name: intl.formatMessage({id: 'app.test'})
}]

最近在用Nestjs写接口，顺便在服务器上部署了一下，以下是步骤。

版本说明

1
2
3
4
5

{
  宝塔面板: "7.5.2",
  Ubuntu: "18.04.4",
  pm2: "5.2"
}

打包

1

yarn build

上传文件

打包完成后会生成dist文件夹，将dist文件夹及package.json文件一同上传到/www/wwwroot路径下任意空文件夹。

例：

1
2
3
4
5

www
  wwwroot
    nestjs
      dist
      package.json

在该文件夹下打开终端，输入 yarn 或者 npm i 命令下载模块。nestjs打包不会包含node_modules中的文件，所以要手动下载。

dist/tsconfig.build.tsbuildinfo 文件保存了node_modules的路径，注意如果路径不正确将无法运行。

配置pm2

打开PM2，添加项目

启动文件设置为 /www/wwwroot/[yourpath]/dist/main.js

运行目录设置为 /www/wwwroot/[yourpath]

例：

我的文件放在目录 /www/wwwroot/nestjs 文件夹下，那么我的启动文件路径为 /www/wwwroot/nestjs/dist/main.js，运行目录为 /www/wwwroot/nestjs。

你也可以直接将dist文件夹下的内容放在项目根目录，当然可能需要修改一下部分文件。比如 tsconfig.build.tsbuildinfo 文件中node_modules的路径。

其他部分可自行设置。

添加项目后回到项目列表，点击映射，为当前项目设置域名，接下来PM2会自动创建一个新的站点。

最后注意端口是否存在限制，到此配置基本完成，打开浏览器输入设置的域名或者使用postman输入接口地址即可查看。