拯救老旧 Discuz 的 Flash 上传

code 1076536 640

Discuz 目前依旧是一个非常重要的建站程序,不少老的站点依旧会使用 Discuz 上运转。
由于 Discuz 是一个多年的程序,所以在系统的设计上,有很多地方充满了对老旧系统的兼容。

比如,Discuz 的上传使用的是 Flash 上传,但在 2021 年,Flash 已经彻底停止使用了,这个时候你就需要使用自己的方式来进行上传。

这里我以 Linux 中国进行的相关改造为例来介绍。

Linux 中国的文章发布系统就是基于 Discuz 实现的,编辑器层面使用的是 Discuz 提供的 TinyMCE,

erf5f

Discuz 提供了一个基于 Flash 的上传组件,但在2021 年,现在这个 Flash 按钮已经完全显示不出来了。

上传组件

这个时候,你就需要自己实现一套上传系统。

由于 Linux 中国的很多底层实现都是基于 Discuz 进行的,因此,此次改造希望继续沿用 Discuz 的系统。

实现路线

在对 Discuz 默认的 Flash 插件进行抓包后,很轻松的就找到了 Discuz 的 Flash 上传组件的接口:/misc.php?mod=swfupload&action=swfupload&operation=album

这个接口接受 Form 表单作为参数,并在表单中接受一个 Hash 作为身份校验,用来判断请求的合法性。

因此,只需要在 TinyMCE 自带的上传功能中加入相应的 Hash 和表单提交的能力,就可以将 Discuz 实现的上传功能改为用 TinyMCE 的原生组件实现。

而 Hash 可以通过分析得出,其算法为 md5(substr(md5($_G['config']['security']['authkey']), 8).$_G['uid'])

因此,需要做的便是,在页面中注入 Hash ,并在 TinyMCE 中调用此值,实现上传功能即可。

样例代码

html/template/default/portal/portalcp_article.htm 文件顶部加入如下代码,从而在文章发布页面注入 hash

<span class="hljs-comment"><!--{eval$swf_hash =  md5(substr(md5($_G['config']['security']['authkey']), 8).$_G['uid']); }--></span><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="language-javascript"><span class="hljs-keyword">var</span> <span class="hljs-variable constant_">FORMHASH</span> = <span class="hljs-string">"{$swf_hash}"</span></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Code language: JavaScript (javascript)

html/static/js/editor_tinymce.js 中的 tinyMCE 配置中添加如下配置项目,即可调用 HASH 来上传文件。从而实现文件的上传。

        images_upload_url: "/misc.php?mod=swfupload&action=swfupload&operation=album",
        images_upload_credentials: true,
        images_upload_handler:function(blobInfo, success, failure, progress) {
            var xhr, formData;
            xhr = new XMLHttpRequest();
            xhr.withCredentials = true;
            xhr.open('POST', '/misc.php?mod=swfupload&action=swfupload&operation=album');
            xhr.upload.onprogress = function(e) {
                progress(e.loaded / e.total * 100);
            };
            xhr.onload = function() {
                var json;
                if (xhr.status === 403) {
                    failure('HTTP Error: ' + xhr.status, {
                        remove: true
                    });
                    return;
                }
                if (xhr.status < 200 || xhr.status >= 300) {
                    failure('HTTP Error: ' + xhr.status);
                    return;
                }
                json = JSON.parse(xhr.responseText);
                if (!json || typeof json.bigimg != 'string') {
                    failure('Invalid JSON: ' + xhr.responseText);
                    return;
                }
                success(json.bigimg);
            };
            xhr.onerror = function() {
                failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
            };
            filenameArray = blobInfo.filename().split(".");
            formData = new FormData();
            formData.append('Filedata', blobInfo.blob(), blobInfo.filename());
            formData.append('Filename',blobInfo.filename() );
            formData.append('type','image');
            formData.append('Upload','Submit Query');
            formData.append('uid',discuz_uid);
            formData.append('filetype',"." +filenameArray[filenameArray.length-1]);
            formData.append('hash',FORMHASH);
            xhr.send(formData);
        },
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function() {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), {
                        title: file.name
                    });
                };
                reader.readAsDataURL(file);
            };
            input.click();
        },
Code language: JavaScript (javascript)

总结

老旧系统的升级改造不可怕,只要你用心,从业务的底层抽丝剥茧,就能找到要解决的问题。剩下,不过是代码层间的问题罢了。

对 Discuz 进行手动搬迁

text

由于服务器托管方的维护,需要对托管在机房的 Linux.cn 服务器进行搬迁,因此,多年不碰 Discuz 的我又要进行一次搬迁。

刚好,记录下来,方便后续查用。

流程图

下方流程图中,绿色为原服务器操作,黄色为新的备份服务器操作

d9uas

具体流程介绍

1. 导出数据库

想要搬迁,首先要处理的是数据库的导出,你可以选择你的站点流量最小的时候,使用 MySQL dump 命令来完成 SQL 文件的导出,导出的命令也非常简单。

mysqldump -uroot -p database >/tmp/db.sql
Code language: JavaScript (javascript)

你可以将上方的 root 调整为合适的用户名;将 database 调整为合适的数据库名,以及将 /tmp/db/sql 调整为合适的文件名

执行命令后,会要求你输入 MySQL 对应用户的密码,输入密码, 稍等片刻,数据库就完成导出,你就可以在 /tmp/db.sql 找到数据库文件。

2. 压缩数据库文件

在进行数据库文件后续的传输时,如果文件太大,可能会导致传输速度较慢,这个时候你可以选择使用 gzip、zip、7zip 之类的进行传递。

我一般习惯用 gzip 进行压缩,并使用 tar 进行打包。

tar -zcvf db.sql.tar.gz /tmp/db.sql

打包后,会获得一个 db.sql.tar.gz 文件,这个文件基于导出的 SQL 进行了一定的压缩,可以确保传输的时候,不需要传输那么大的文件。在实际测试时,可以将 1.1G 的数据库压缩到 188M,效果还是十分明显的。

3. 压缩网站文件

需要传递到新的服务器中的,除了 MySQL 数据库,还需要传递网站的代码文件到新的服务器中,因此,为了方便传输,同样需要进行压缩。

tar -zcvf website.tar.gz /data/website/website.com

命令执行完成后,你就会获得一个 website.tar.gz ,这个文件就可以在后续传递到你的新服务器中。

4. 配置新的网站运行环境

在你备份的同时,你可以在新的服务器上进行环境配置。

一般而言,在搬迁的同时,不会采用新的版本的软件,以避免出现问题。

你可以通过 php -vmysql --version 来查看 PHP 和 MySQL 的版本。

Nginx 的版本倒是不需要太过介怀,他只是一个反向代理,问题不大。

MySQL 的版本则在进行迁移的时候,不建议做版本升级,尽量保持同版本升级;如果跨版本,则需要考虑相应的回滚措施。

5. 进行文件传输

在新的服务器中配置旧服务器的公钥,从而可以直接通过 scp,在两个服务器之间传递文件,简单方便。

scp source root@host:/data/xxx 
Code language: JavaScript (javascript)

执行上面的命令就可以直接在两个服务器之间传输文件,简单方便快捷。

6. 进行文件恢复

完成文件搬迁后,就可以在新的服务器上配置环境,这时可以根据你的配置,将文件迁移至对应的目录中。

涉及到压缩包,可以进行一下解压操作。

7. 配置应用服务器

在我们的系统运行时,会依赖很多应用服务器,比如数据库 MySQL 、反向代理 Nginx 等等。在迁移时,比较稳妥的方案是在当前版本的基础之上进行配置。

这时你需要在新的服务器上配置和旧服务器完全一致的运行环境,从而确保迁移后业务不会出问题。

8. 导入数据库和站点文件

在完成了数据文件的迁移和,就可以进行数据库的导入,并迁移网站文件。

你可以使用 mysql 命令行中的 source 命令,来加载 mysql 的dump 文件。

对于网站文件,只需要根据你的配置进行调整即可。

9. 修复权限

在文件进行迁移的时候,可能会由于迁移前后的用户等问题出现权限问题。因此,如果你发现出现了项目的权限有问题,则需要根据实际情况,调整项目的文件和目录的权限。

10. 修改配置

Discuz 的配置文件会在多个地方重复使用,因此,在实际的使用时,如果你调整了数据库信息,则需要修改以下几个文件中的配置项目。

  • config/config_global.php
  • config/config_ucenter.php
  • uc_server/data/config.inc.php

修改其中的数据库名,从而确保系统中的各模块都可以正常工作。