问题

先介绍一下S3预签名上传过程。使用预签名URL，发送PUT请求方式上传文件到S3桶。主要有2个步骤：

• 前端发送文件MIME类型，文件大小，文件名，给后端，后端利用s3相关SDK生成签名URL；
• 然后，前端拿着这个签名URL，设置好正确的Content-Type请求头，发送PUT请求，上传文件到S3桶即可。

一图胜千言

这里主要介绍前端怎么使用微信相关API实现上传文件到S3桶的过程。不会介绍后端的实现哈。

微信小程序

wx.request({
  url: "签名URL",
  method: "PUT",
  header: {
    "Content-Type": "{获取文件的MIME类型}",
  },
  data: {获取文件的ArrayBuffer数据对象},
  success: function success(res) {
    var url = prefix + "/" + camSafeUrlEncode(key).replace(/%2F/g, "/");
    if (res.statusCode === 200) {
      wx.showModal({
        title: "上传成功",
        content: url,
        showCancel: false,
      });
    } else {
      wx.showModal({
        title: "上传失败",
        content: JSON.stringify(res),
        showCancel: false,
      });
    }
    console.log(res.statusCode);
    console.log(url);
  },
  fail: function fail(res) {
    wx.showModal({
      title: "上传失败",
      content: JSON.stringify(res),
      showCancel: false,
    });
  },
});

上面这段是微信小程序上传的主体代码，但是上面还有两个问题没有解决，如下：

• 获取文件的MIME类型
• 获取文件的ArrayBuffer对象

获取文件的ArrayBuffer对象

从微信API文档可以看出来，发送PUT请求，请求体需要一个ArrayBuffer对象。进一步查看微信API文档如下：

从这个接口文档可以知道，我们可以通过FileSystemManager对象获取ArrayBuffer。具体实现如下：

var fileSystemManager = wx.getFileSystemManager();
var arrayBuffer = fileSystemManager.readFileSync("文件路径");

这样就获得了ArrayBuffer数据。

获取文件的MIME类型

现在我们需要根据文件名获取，该文件的MIME类型。这里我们使用mime js库来解决这个问题。先安装这个依赖库如下：

npm install mime

获取文件MIME类型，具体代码如下：

import mime from 'mime';

var mimeType = mime.getType("文件名");

这样就获得了文件的MIME类型。

总结

到此为止。小程序S3预签名PUT上传就这样了。

参考

• 使用预签名 URL 上传对象
• 小程序直传实践
• 如何获取文件的mime?
• mime
• RequestTask wx.request(Object object)
• postman，s3预签名URL上传文件
• FileSystemManager