后端文件上传之服务端命令上传

sz_xd

本帖最后由 Gerald.Zhang 于 2024-7-25 10:52 编辑

场景描述
在活字格中，文件上传是一个封装性较好的功能。我们可以直接通过活字格在页面中提供的文件上传的单元格类型（例如『附件』、『EL-文件上传』等），实现文件的上传。
但是在实际的开发中，往往会遇到，前端页面是现有的系统的页面，或者需要用代码新开发一些页面，后端服务仍然使用活字格的『服务端命令』。这些页面如果有文件上传的需求，就需要想办法和活字格的『服务端命令』进行通信，实现文件上传。

实现思路
在实现功能前，我们先了解一下活字格目前文件上传的过程是怎样的：
1. 当我们使用单元格类型进行上传时，文件会通过内部接口直接提交到活字格服务器中的一个临时路径上，并将这个文件的地址传回给页面上。这样页面中就可以看到我们上传的文件，并可实现后续的预览功能。
2. 当我们确认提交数据时，此时再次提交的就不再是文件本身，而是这个文件在服务器上的临时地址。活字格会将这个临时地址正式复制到服务器当中存储附件的路径下，并将最终的路径存储到数据库中。之后会将临时路径下的文件进行删除。

在这个过程中，步骤一中的文件如何从前端提交给服务端是我们需要解决的关键问题。首先，有几个客观现实我们需要清楚：

数据可通过 formdata 或者 json 的方式进行提交
活字格的『服务端命令』仅支持 json 格式。

因此，我们只需要将文件在前端转化成文本格式，之后通过 json，和其他字段数据一同提交至『服务端命令』。在『服务端命令』中将文本逆向在转化成文件本身即可。

具体操作
前端侧
1. 我们需要通过 JavaScript 中提供的 FileReader 将文件转化为 base64 格式下的字符串。
2. 组装提交的数据模型。需要注意，fileName 与 fileContent 是必要参数。fileName 当中存储了文件的名称以及后缀名，便于服务端在逆向转化时能准确构建对应文件类型。fileContent中保存着文件自身的 base64 数据内容。
3. 调用活字格的『服务端命令』接口。

前端参考代码如下：

var fileInput = document.getElementById('file');
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
// FileReader 的 load 事件，用于自定义文件处理后的逻辑。
reader.onload = function(event) {
// 获取Base64编码内容
var base64File = event.target.result.split(',')[1];
// 构建接口数据模型
var data = {
name: document.getElementById('name').value,
gender: document.getElementById('gender').value,
fileName: file.name,
fileContent: base64File
};
// 调用活字格接口
fetch('/Forguncy/ServerCommand/upload', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.text())
.then(result => {
document.getElementById('result').innerText = '文件上传成功: ' + result;
})
.catch(error => {
document.getElementById('result').innerText = '文件上传失败: ' + error;
});
};
// 读取前端选择的文件文件并将其转化为 base64 编码的字符串，执行完成后会触发 load 事件
reader.readAsDataURL(file);
} else {
document.getElementById('result').innerText = '请选择一个文件进行上传';
}

复制代码

活字格后端侧
1. 定义一个用于临时存放上传文件的基础路径
2. 将前端传入的 base64 编码的文件内容字符串转化为文件，并将其存放入临时路径下。（此处感谢豪大的插件）
3. 将存放文件的临时路径和其他字段数据一同写入数据表中。
4. 按照自身需求将临时文件进行清除

注意点
1. 数据表中存放附件的字段类型必须是附件。这样活字格才会自动根据传入的地址生成附件相应的 GUID。
2. 从性能角度考量，此方法更适用于数据量较小的文件上传需求。如果文件较大，推荐自行开发后端支持 form-data 的上传服务，并将服务端的临时地址传入活字格的接口中，可参考下一篇文章。

示例可参考附件。

		自动登录	找回密码
密码			立即注册

[解决方案] 后端文件上传之服务端命令上传

评分

0 个回复