微信小程序上传文件小结 - Web前端-困知记 - SegmentFault 思否

19-06-19 来源：[db:作者]
收藏我要投稿
前言

后端用的是Rails ActiveStorage direct_upload的处理方式, 前端被要求：
提供文件的
MD5-Base64校验值，获得上传地址；
将文件上传到上述指定地址（此处会校验文件的MD5-Base64值是否与上一步给的一致）；
将文件的signed_id作为文件参数。

相关知识
因为目前开发任务重且紧，暂时略过此部分，只记录结论要点，后续有时间再补充相关知识
要点小结
3.0 上传文件（后端 Rails: activeStorage）
Step 1: 计算文件MD5-Base64 Encoded摘要


小程序中前端无法获取文件的Binary格式，因此无法自行或使用第三方库来计算文件的MD5值，但幸运的是，小程序也提供了API来做这件事，请使用：wx.getFileInfo

将获得的MD5值转为Base64格式。此处严重注意，不能把MD5当作字符串去编码为Base64格式，而应该编码为Hex，再编码为Base64。可使用CryptoJS库，另外需要注意的是，CryptoJS.enc.Base64.stringify需要的参数是WordArray格式，而通过CryptoJS.enc.Hex.parse转换后的正好是其所需要的参数格式。
此步骤问题见此处

Step 2: 上传文件到上一步返回的指定direct_upload地址

小程序前端无法直接获得文件的Binary格式传给后端，但可以通过wx.uploadFile上传文件，通过此接口发送请求，后端可获取到文件Binary格式
若小程序端使用wx.uploadFile上传文件，后端提供的上传文件接口需符合wx.uploadFile的要求，即请求方式为POST, 并指定所需文件key名（而不是直接要求把Binary文件丢在请求body中）

由于后端表示使用的是第三方亚马逊的服务，无法修改接口，因此，小程序端要寻找其他方式获取文件Binary上传，所幸在小程序提供的文件管理器中找到方法可以获取文件Binary, 方法为FileSystemManager.readFile(Object), API文档点击此处查看

使用FileSystemManager.readFile(Object)的时候，不要指定encoding, 以默认ArrayBuffer的格式获取文件内容，这样服务器那边拿到文件算出的Base64 Encoded MD5才能与前端传过去的一致。若指定encoding为binary，则接口返回结果表示：接收到的文件计算出的Base64 Encoded MD5与前端这边所发送的不一致，校验不通过。看起来服务端那边要的文件格式，是ArrayBuffer格式，而非binary编码的文件。