JavaScript AJAX上传base64图片

下面代码可以通过Ajax请求,直接向一个正常的文件上传接口提交请求,上传已经base64编码的图片文件。

直接贴代码:

function ajaxSubmitImageFile(base64Codes) {
    let convertBase64UrlToBlob = function(urlData) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bytes = window.atob(urlData.split(',')[1]); // 去掉url的头,并转换为byte

        // 处理异常,将ascii码小于0的转换为大于0
        let ab = new ArrayBuffer(bytes.length);
        let ia = new Uint8Array(ab);
        for (let i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }

        return new Blob([ab], { type: mime });
    };

    let getFileExt = function(urlData) {
        let arr = urlData.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        return mime.replace('image/', '');
    };

    let deferred = $.Deferred();

    // let form = document.forms[0];
    // var formData = new FormData(form);   // 这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数

    let formData = new FormData();

    let fileExt = getFileExt(base64Codes);

    // convertBase64UrlToBlob函数是将base64编码转换为Blob
    formData.append(
        'upfile',
        convertBase64UrlToBlob(base64Codes),
        'file_' + Date.parse(new Date()) + '.' + fileExt
    ); // append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同

    // ajax 提交form
    $.ajax({
        url:
            window.location.origin +
            '/article/ueditor/asp/controller.asp?action=uploadimage',
        type: 'POST',
        data: formData,
        // dataType: "text",
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头

        success: function(data) {
            // console.log(data);
            if (data) {
                data = JSON.parse(data);
                if (data.state === 'SUCCESS') {
                    deferred.resolve(window.location.origin + data.url);
                } else {
                    deferred.reject('error');
                }
            } else {
                deferred.reject('error');
            }

            // window.location.href = "${ctx}" + data;
        },
        xhr: function() {
            // 在jquery函数中直接使用ajax的XMLHttpRequest对象
            let xhr = new XMLHttpRequest();

            xhr.upload.addEventListener(
                'progress',
                function(evt) {
                    if (evt.lengthComputable) {
                        let percentComplete = Math.round(
                            (evt.loaded * 100) / evt.total
                        );
                        window.console.log(
                            '正在提交.' + percentComplete.toString() + '%'
                        ); // 在控制台打印上传进度
                    }
                },
                false
            );

            return xhr;
        }
    });

    return deferred.promise();
}

prettier 配置

项目文件夹下建立 .prettierrc 文件,写入下面内容:

{
    tabWidth: 4,
    singleQuote: true,             // 用单引号
    printWidth: 120,               // 换行字符串阈值
    semi: true,                    // 句末加分号
    trailingComma: 'none',         // 最后一个对象元素加逗号
    bracketSpacing: true,          // 对象,数组加空格
    jsxBracketSameLine: false,     // jsx > 是否另起一行
    arrowParens: 'avoid',          // (x) => {} 是否要有小括号
    requirePragma: false,          // 是否要注释来决定是否格式化代码
    proseWrap: 'preserve'          // 是否要换行
}

NGINX 中添加 SSL 证书

打开 NGINX 配置文件,在其中的 server { … } 段中,添加下面内容:

ssl on;
ssl_certificate /path/to/your/crt/file;
ssl_certificate_key /path/to/your/key/file;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;

修改完之后,重启 NGINX 服务:

systemctl restart nginx

NGINX + PHP-FPM 优化记录

最近做的 NGINX + PHP-FPM 优化,记录一下,留待后用。

测试环境,8 核 CPU,64G 内存。

1、PHP-FPM 配置文件

listen = 127.0.0.1:9000 修改为 listen = /tmp/php-fpm.sock
listen.backlog 取消注释,并修改值为 102400
pm = dynamic 修改为 pm = static
pm.max_children 的值修改为 200

2、启动多个 PHP-FPM 实例

复制 php-fpm.conf 配置文件

cp php-fpm.conf php-fpm.1.conf

修改复制的 php-fpm.1.conf

listen = /tmp/php-fpm.sock 修改为 listen = /tmp/php-fpm.1.sock

建议启动的 PHP-FPM 实例数量与 CPU 核心数量一致。

3、NGINX 配置文件

worker_processes 8;
worker_cpu_affinity 00000001 00000010 00000100 00001000 00010000 00100000 01000000 10000000;
worker_rlimit_nofile 204800;
events {
    use epoll;
    worker_connections 204800;
}
upstream phpbackend {
    server unix:/tmp/php-fpm.sock
    server unix:/tmp/php-fpm.1.sock
}
server {
    default backlog = 102400;
    location ~ .php$ {
        fastcgi_pass   phpbackend;
        include        fastcgi_params;
    }
}

4、修改系统打开文件数

打开 /etc/security/limits.conf 文件,添加:

* soft nofile 65535
* hard nofile 65535

修改完成需要重启服务器生效!并可使用下面命令查看是否生效:

ulimit -n

wp cli 的安装使用

推荐安装方式:wget 或 curl

wget https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

安装后,可以查看版本等信息

php wp-cli.phar --info

为了方便使用(直接使用wp命令)

chmod +x wp-cli.phar# sudo mv wp-cli.phar /usr/local/bin/wp

版本更新(升级)

wp cli update

在 TypeScript 中引入 CSS 并使用 WebPack 打包

需要用到 style-loader 和 css-loader 两个包,首先安装它们(我直接安装在工程中):

npm i --save-dev style-loader css-loader

在你的 .ts 或 .tsx 源码中引入 CSS 样式表文件:

import './css/custom.css';

修改 webpack.config.js 配置文件,增加内容如下:

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }
    ],
},

OK,执行打包命令:

webpack --mode production

👌