参考文献

• https://stackoverflow.com/questions/24535189/composing-multipart-form-data-with-a-different-content-type-on-each-parts-with-j
• https://www.reddit.com/r/lua/comments/yaizxv/lua_post_multipartformdata_and_a_file_via/?rdt=60519
• https://github.com/rstudio/redx/issues/19

问题产生的原因

后端有个文件上传服务，前端可以直接像文件上传到服务器，但这个上传服务除了有form-data文件流之外，还需要有其它key/value的表单参数，这些参数是固定的，或者有一定的规则，这时我们通过apisix代理一下，就显得更加灵活和理了。

http中的multipart/form-data消息体如下

修改后的请求，是一个标准的http请求，你通过postman的codesnippet视图也可以看到，代码如下

POST /mobile-server/manager/6.0.0.0.0/cdnManage/customUpload HTTP/1.1
Host: api-gw-test.pkulaw.com
Cookie: CookieId=b97385476b3c721c81a9163f1c8a85dd; SUB=347c9e9e-076c-45e3-be74-c482fffcc6e5; preferred_username=test; session_state=458053bd-5970-4200-9b6f-cf538ec9808b
Content-Length: 508
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="folder"

app/icon
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="domain"

https://static.pkulaw.com
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="fileName"

xzcf.png
----WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="multipartFile"; filename="/C:/Users/User/Pictures/21111.png"
Content-Type: image/png

(data)
----WebKitFormBoundary7MA4YWxkTrZu0gW--

开发过程中的一些坑

1. 参数拼接错误,form-data的文件流应该是第一个参数

服务端收到的请求体和参数为空

2. 后端服务直接报错，原因有以下几个

• 有空的boundary，
• boundary与字段之间没有\r\n换行
• 将所有\n替换为\r\n，可能会解决上传文件和参数在接收端为空的问题
• http请求头中的boundary是没有开头的两个减号的，这块非常容易出错，例如
  ngx.req.set_header("Content-Type", "multipart/form-data; boundary=" .. boundary)
• boundary在各字段之前并不相同，需要着重看一下，一般是------开头，看看是否-的数量不同，可能接收端会有下面的错误，表示请求体拼接不正确

Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: Stream ended unexpectedly

file-upload-proxy文件上传转发插件源码

-- author: zhangzhanling
-- 文件上传服务代理
-- 代理前端，与文件上传服务进行通讯
-- 在请求体中，添加统一的参数
local core = require("apisix.core")
local uuid = require("resty.jit-uuid")
local ngx = require("ngx")
-- 定义原数据格式
local schema = {
    type = "object",
    properties = {
        folder = {
            type = "string",
            description = "相对目录"
        },
        domain = {
            type = "string",
            description = "图片服务的域名"
        }
    }
}

local _M = {
    version = 0.1,
    priority = 1009, --数值超大，优先级越高，因为authz-keycloak是2000，它需要在authz-keycloak之后执行，所以把它定为1000,因为咱们也依赖proxy_rewrite插件
    name = "file-upload-proxy",
    schema = schema
}

local function get_specific_header(ctx, header_name)
    local headers = core.request.headers(ctx)
    local value = headers[header_name]
    if type(value) == "table" then
        return table.concat(value, ", ")
    else
        return value
    end

end
-- 辅助函数：查找边界字符串
local function find_boundary(content_type)
    return content_type:match("boundary=([^;]+)")
end

function _M.rewrite(conf, ctx)
    ngx.req.read_body()
    local body_data = ngx.req.get_body_data()

    if not body_data then
        core.log.warn("Failed to read request body.")
        return 400
    end

    local content_type = ngx.req.get_headers()["content-type"]
    local boundary = find_boundary(content_type)

    if not boundary then
        core.log.warn("No boundary found in content type.")
        return 400
    end

    local startBoundary = "--" .. boundary

    local sub_value = get_specific_header(ctx, "sub")
    local folder = conf.folder
    if sub_value then
        folder = folder .. "/" .. sub_value
    end

    ---- 构建新的请求体
    local new_body = ""

    local fileExt = ".jpg"
    local filename = string.match(body_data, 'filename="([^"]+)"')

    if filename then
        -- 从filename中提取扩展名
        local _, _, ext = string.find(filename, "%.([^.]+)$")
        if ext then
            core.log.info("文件扩展名为: " .. ext)
            fileExt = "." .. ext;
        end
    end

    -- 添加新字段
    local new_fields = {
        { name = "domain", value = conf.domain },
        { name = "fileName", value = uuid() .. fileExt },
        { name = "folder", value = folder }
    }
    ---- 添加新字段
    for _, field in ipairs(new_fields) do
        new_body = new_body .. string.format("\r\n%s\r\nContent-Disposition: form-data; name=\"%s\"\r\n\r\n%s", startBoundary, field.name, field.value)
    end

    new_body = new_body .. "\r\n" .. body_data

    -- 设置新的请求体
    ngx.req.set_body_data(new_body)

    -- 更新 Content-Type 头
    ngx.req.set_header("Content-Type", "multipart/form-data; boundary=" .. boundary)

    -- 计算并设置 Content-Length
    local content_length = string.len(new_body)
    ngx.req.set_header("Content-Length", content_length)

    -- 日志输出新请求体和内容长度
    core.log.warn("boundary:", boundary)
    core.log.warn("New request body: ", new_body)
    core.log.warn("Content-Length: ", content_length)
end

-- 注册插件
return _M

前言

昨天写了一篇介绍 Blazor Hybrid 技术的文章
，但限于篇幅，一些问题未能深入探讨。今天，我想继续记录使用 Blazor Hybrid 过程中遇到的几个问题，以及这个技术目前的一些局限性。

文件拖放事件的局限

Blazor Hybrid 的运行环境是 WebView，这导致了在处理文件拖放时出现了一些限制。在传统桌面应用中（如 WinForms 或 WPF），开发者可以直接捕获拖放事件，并获得文件的完整路径。但在 Blazor 中，拖放事件只能像浏览器中一样处理，意味着我们只能获得上传文件的流，而无法获取文件的实际路径。

这对于那些需要直接访问文件路径的功能（如Clipify中把视频拖进去处理）带来了很大的不便。

冗余代码
（不是）

看了项目代码的同学可能会发现，FormMain.cs里还有处理拖放事件的代码，不过实际上并没有生效。

// 处理拖动进入事件，检测是否为文件
private void blazorWebView1_DragEnter(object sender, DragEventArgs e) {
  Console.WriteLine("drag enter");
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    // 改变鼠标图标，表示可以拖放
    e.Effect = DragDropEffects.Copy;
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}

// 处理拖放事件，获取文件路径
private void blazorWebView1_DragDrop(object sender, DragEventArgs e) {
  Console.WriteLine("drag drop");
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    var files = (string[]?)e.Data.GetData(DataFormats.FileDrop);

    // 这里只处理单个文件，当然你也可以处理多个文件
    if (files?.Length > 0) {
      var filePath = files[0]; // 获取拖放的文件路径
      MessageBox.Show($"文件路径: {filePath}");

      // 在这里你可以将文件路径传递给 Blazor 或其他处理逻辑
    }
  }
}

// 处理 DragOver 事件，防止系统默认行为
private void blazorWebView1_DragOver(object sender, DragEventArgs e) {
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    e.Effect = DragDropEffects.Copy; // 明确允许拖放文件
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}

解决方案

目前的解决办法有限，根据查找到的资料和我自己的探索，有以下几种：

1. 在需要拖放的时候，使用一个WinForms原生控件覆盖webview
2. 使用hook技术，拦截webview的拖放事件
3. 重写微软提个的这个 Blazor Webview 控件，自己实现
   WndProc
   方法

第3种方法的代码大概是这样（未验证）

public class CustomBlazorWebView : BlazorWebView {
  protected override void WndProc(ref Message m) {
    const int WM_DROPFILES = 0x233; // 拖放文件消息

    if (m.Msg == WM_DROPFILES) {
      // 处理文件拖放逻辑
      // 你可以在这里调用你的拖放事件处理逻辑

      // 阻止消息传递，避免系统默认处理文件
      return;
    }

    base.WndProc(ref m);
  }
}

PS：我嫌麻烦就还没去折腾实现这个拖放功能，目前只做了打开对话框选择文件。

社区反馈

同样的问题我在 Github issues 和 Stack Overflow 之类的平台也有看到很多人提出，不过看起来微软并不想解决这些问题。

相关链接：

• https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805
• https://github.com/dotnet/maui/issues/2205
• https://stackoverflow.com/questions/73197778/net-maui-blazor-app-drag-and-drop-impossible

桌面应用体验差异

Blazor Hybrid 尽管以桌面应用的形式运行，但表现更接近于网页应用。

浏览器的快捷键

一个明显的例子是，在 WebView 中按下 F5 键时，页面会像浏览器一样刷新，这种行为显然不符合传统桌面软件的用户体验。

在类似的技术中，如 Electron，也存在类似的局限。但不同的是，Electron 提供了更多对浏览器行为的控制手段，可以阻止或重定义这些行为，而 Blazor Hybrid 目前则没有这些更细粒度的控制能力。

从桌面应用的角度来看，用户希望获得一致且原生的操作体验，因此这些细微的差异可能会影响开发者对 Blazor Hybrid 应用的期望。

窗口大小调整的表现

在使用 Blazor Hybrid 时，我还注意到窗口大小调整的流畅度问题。相比起原生的桌面应用，Blazor Hybrid 的表现不尽如人意。当用户调整窗口大小时，界面偶尔会出现黑边或画面撕裂的现象。

这种问题不仅在 Blazor Hybrid 中出现，实际上，在浏览器（chrome）和 Electron 应用（QQ）中，我也观察到类似的问题。

为了更深入地理解这个现象，我还测试了 C++ 原生应用，结果发现原生应用在调整窗口大小时相对来说更流畅，没有出现黑边或撕裂的问题。

我猜测造成这种差异的原因可能在于，Blazor Hybrid 和 Electron 依赖 WebView 作为渲染引擎，而 WebView 的渲染机制在处理窗口大小调整时不如原生 UI 渲染引擎高效。

小结

Blazor Hybrid 是一个非常有潜力的技术，它让 C# 开发者能够轻松地构建跨平台桌面应用。

然而，在使用过程中，我发现了一些需要关注的问题，尤其是在拖放事件、桌面应用行为一致性和窗口大小调整表现上。

这些问题目前可能对开发者造成一定的困扰，也影响了用户体验的流畅性。

接下来我会找时间试一下 Electron 和 wails 的开发体验，进一步探索 Blazor Hybrid 在桌面软件开发中的优势。

一、nodejs 和 npm 的版本是有适配的

首先看下官网列明的大概匹配关系：

官网链接地址：
https://nodejs.org/zh-cn/about/previous-releases

可以查看下本地的版本，根据上表中的对应关系，看是否差别太大。如果差别太大需要更新到对应版本，不然会出现各种报错问题，导致 npm 命令执行失败。

博主当前版本示例：

>npm -v
6.14.18
>node -v
v14.18.0
    
// "node-sass": "^4.14.1"
// "sass-loader": "^7.3.0"

二、版本更新

2.1 推荐使用 nvm 工具，直接通过命令行安转和切换各个版本

无论是 Windows 平台，还是 Linux 平台，都推荐使用 nvm 工具。

nvm（Node.js Version Management）
，是一个 nodejs 的版本管理工具。它是专门为解决 node.js 各种版本存在不兼容的问题。
可以通过它安装和切换不同版本的 node.js，还可同时在一个环境中安装多个 node.js 版本（和配套的 npm）
，这样在日常开发中就方便多了。

但需要注意的是，在安装 nvm 前，需要将原先已安装的 nodejs 全部删除干净。

详情可参考： https://blog.csdn.net/goods_yao/article/details/137854626

2.2 手动更新

当然，除了通过工具来更新，
也可以手动安装
，下面推荐个下载 nodejs 的阿里云地址，其中包含历史的各个版本。

安装包下载地址： https://mirrors.aliyun.com/nodejs-release/

单击对应的版本，进入详情，会有各个平台的安装文件。

• Windows 平台

可以直接下载系统对应的 .msi 后缀的安装程序。现今 32 位的系统已经不多了，一般可以下载 x64 版本。

下载好后直接双击安装即可。

nodejs 详细的安装步骤可以参考： https://blog.csdn.net/Nicolecocol/article/details/136788200

npm 是 Node.js 的包管理器，用于发布和管理 Node.js 应用程序的依赖关系。

通常情况下，在安装 Node.js 时，npm 会自动包含在内，无需单独下载和配置。

若要
更新指定版本的 npm
，可以参考以下命令：

npm install -g npm
npm install -g npm@<指定版本号>
npm install -g npm@6.14.18

• Linux 平台

安装步骤可以参考：
https://blog.csdn.net/qq_40743057/article/details/139139574

要注意的是，CentOS 7 最多支持到 Node.js-16.x 版本。在 CentOS 7 上安装更高版本的 Node.js，如 Node.js-18.x，可能会导致系统出现兼容性问题和报错。这是因为随着 Node.js 版本的更新，其依赖的库和模块可能也会发生变化，这可能与 CentOS 7 上的旧版软件包产生冲突。为了确保 Node.js 能够正常运行并避免潜在的错误，建议在 CentOS 7 上安装官方推荐的 Node.js 16.x 版本。这一版本已经经过了充分的测试和验证，与 CentOS 7 的兼容性较好，能够提供稳定的运行环境。

三、遇到的几个错误提示

3.1 Node Sass could not find a binding for your current environment...

报错内容：

// 执行命令 npm run dev 时报错：
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 14.x
// 执行 npm 命令报错：
Failed to resolve loader: sass-loader You may need to install it. Error from chokidar (E:\): Error: EBUSY: resource busy or locked

报错原因是，项目中可能是区分测试和正式服务配置的。

可以尝试通过如下命令修复：

// 默认是在正式服中操作
// 先卸载，再安装
npm uninstall sass-loader node-sass
npm install sass-loader node-sass
// 若需要再测试环境更新，则需要加上一个配置：--save-dev
npm uninstall sass-loader node-sass --save-dev
npm install sass-loader node-sass --save-dev
// 安装指定版本
npm uninstall node-sass
npm install node-sass@4.14.1
npm install node-sass@latest

3.2 errno: -4071,  code: 'EINVAL',  syscall: 'spawnSync npm.cmd',  path: 'npm.cmd' ...

报错详情：

【初始化报错】
errno: -4071,  code: 'EINVAL',  syscall: 'spawnSync npm.cmd',  path: 'npm.cmd',
arco design 初始化项目时报错：× 模板内容拷贝失败 Error: spawnSync npm.cmd EINVAL

原因是 child_process.spawn 有漏洞 (CVE-2024-27980)-(HIGH)，调用要加{ shell: true }。2024.4.10 node 修复了这个漏洞，代码执行就报错了。cli 下载 arco-design-pro-vue 执行到 .arco-cli\init.js 就出现 spawn 报错。

解决办法：使用 18.20.2、20.12.2、21.17.3 之前的版本就可以了。我用 18.20.0 版本就可以了。

解决方案参考： https://github.com/arco-design/arco-cli/issues/92

3.3 淘宝镜像地址证书过期

报错详情：

request to https://registry.npm.taobao.org/axios failed, reason: certificate has expired

解决方案：

先备份 npm 配置，可以防止在更换过程中出现意外导致配置丢失
npm config get > npm_config.txt
npm config set registry https://registry.npmmirror.com
npm install --save-dev @arco-design/web-vue
npm i -g arco-cli

3.4 Error: Command 「yarn 」 executed failed

报错详情：

× 项目依赖安失败，你可以稍后尝试手动安装项目依赖
Error: Command 「yarn 」 executed failed:
warning ..\package.json: No license field
warning gifsicle > bin-build > tempfile > uuid@3.4.0: Please upgrade  to version 7 or higher.
。。。

解决方案：

打开命令行，切换到项目目录，例如：cd your_project_directory
运行以下命令来清除之前的依赖缓存：yarn cache clean
更新项目的依赖包：yarn upgrade
重新安装项目依赖：yarn install

3.5 npm 命令执行时报错：Error: Cannot find module 'node:path'

可能得原因是，nodejs 和 npm 版本不匹配，按照本文第一章节中的版本对应关系，升级 nodejs 即可。

数据资产管理是一项系统而复杂的工程，涉及到元数据、数据血缘、数据质量、数据服务、数据监控、数据安全、数据权限等众多方面，为了更高效的管理好数据资产，因此在很多大型的企业或者组织中，通常会构建一个数据资产管理平台来管理这些各种各样的数据资产，数据资产管理平台通常会包含如下功能： 关注
清哥聊技术
公众号，获取更多权威技术文章。

• 元数据：主要负责元数据的维护和查看，让元数据成为数据资产的一个“电子目录”，方便外部用户查看和检索其需要的数据是存储在哪个数据库以及哪个表的哪个字段中，也方便外部用户知道数据资产中每个数据库、表、字段的具体含义。
• 数据血缘：主要负责数据与数据之间的血缘关系跟踪，以方便用户在使用数据时，能快速知道数据的处理过程以及来龙去脉。
• 数据质量：主要负责数据质量的监控与告警，当数据质量出现问题时，能够快速让相关的人员知道，数据质量的监控是持续提高数据质量的关键所在，也是数据资产持续优化、改进、提高质量的关键。
• 数据服务：主要负责数据服务的管理，包括服务的创建、开发、发布上线以及被业务请求调用。数据服务是数据对外使用和产生价值的最常见方式之一，所以数据服务的管理与维护至关重要。
• 数据监控：主要负责数据链路、数据任务、数据处理资源、数据处理结果等的监控与告警，当数据出现问题时，能够通过监控与告警，让数据问题得到及时快速的解决。
• 数据安全：主要负责数据安全的管理，数据安全是数据资产管理中最重要的环节，也是数据资产管理的基础。通过评估数据的安全风险、制定数据安全管理的规章制度、对数据进行安全级别的分类，完善数据安全管理相关规范文档，保证数据是被合法合规、安全地获取、处理、存储以及使用
• 数据权限：主要负责数据权限的分配与管理，通过数据权限的控制，能够更好的去保护数据资产中的隐私信息和敏感信息。

数据资产管理架构在设计时，通常需要考虑和解决如下问题：

• 数据冗余：一般指的是由于数据没有进行统一的管理，导致很多不同的平台或者系统都存储了相同的数据，特别是对于一些很多业务或者系统都需要共用的数据。
• 数据孤岛和数据分散：由于数据没有进行统一的集中式管理，所以数据很容易分散在不同的系统中并且容易产生数据孤岛。
• 数据口径无法统一：每个业务系统都有自己的数据管理和分析，导致数据计算的口径会存在不一致，这样的话，就导致在做数据决策时，不知道到底以那一份数据口径为准。

1、数据资产的架构设计