微信小程序上传文件小结

前言

后端用的是Rails ActiveStorage direct_upload的处理方式, 前端被要求:

  1. 提供文件的MD5-Base64校验值,获得上传地址;
  2. 将文件上传到上述指定地址(此处会校验文件的MD5-Base64值是否与上一步给的一致);
  3. 将文件的signed_id作为文件参数。

相关知识

因为目前开发任务重且紧,暂时略过此部分,只记录结论要点,后续有时间再补充相关知识

要点小结

3.0 上传文件(后端 Rails: activeStorage)

Step 1: 计算文件MD5-Base64 Encoded摘要

  1. 小程序中前端无法获取文件的Binary格式,因此无法自行或使用第三方库来计算文件的MD5值,但幸运的是,小程序也提供了API来做这件事,请使用:wx.getFileInfo
  2. 将获得的MD5值转为Base64格式。此处严重注意,不能把MD5当作字符串去编码为Base64格式,而应该编码为Hex,再编码为Base64。可使用CryptoJS库,另外需要注意的是,CryptoJS.enc.Base64.stringify需要的参数是WordArray格式,而通过CryptoJS.enc.Hex.parse转换后的正好是其所需要的参数格式。
  3. 此步骤问题见此处

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

  1. 小程序前端无法直接获得文件的Binary格式传给后端,但可以通过wx.uploadFile上传文件,通过此接口发送请求,后端可获取到文件Binary格式
  2. 若小程序端使用wx.uploadFile上传文件,后端提供的上传文件接口需符合wx.uploadFile的要求,即请求方式为POST, 并指定所需文件key名(而不是直接要求把Binary文件丢在请求body中)
  3. 由于后端表示使用的是第三方亚马逊的服务,无法修改接口,因此,小程序端要寻找其他方式获取文件Binary上传,所幸在小程序提供的文件管理器中找到方法可以获取文件Binary, 方法为FileSystemManager.readFile(Object), API文档点击此处查看
  4. 使用FileSystemManager.readFile(Object)的时候,不要指定encoding, 以默认ArrayBuffer的格式获取文件内容,这样服务器那边拿到文件算出的Base64 Encoded MD5才能与前端传过去的一致。若指定encoding为binary,则接口返回结果表示:接收到的文件计算出的Base64 Encoded MD5与前端这边所发送的不一致,校验不通过。看起来服务端那边要的文件格式,是ArrayBuffer格式,而非binary编码的文件。
    原文作者:bolelee
    原文地址: https://segmentfault.com/a/1190000019414586
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞