微信小程序直传文件到OSS

本文介绍如何在微信小程序环境下将文件上传到OSS。

背景信息

小程序是当下比较流行的移动应用，例如大家熟知的微信小程序、支付宝小程序等。小程序是一种全新的开发模式，无需下载和安装，为终端用户提供更优的用户体验。如何在小程序环境下上传文件到OSS也成为开发者比较关心的一个问题。

与JavaScript客户端直传实践的原理相同，小程序上传文件到OSS也是利用OSS提供的PostObject接口来实现表单文件上传到OSS。关于PostObject的详细介绍，请参见PostObject。

步骤1：微信小程序配置域名白名单

您可以为微信小程序配置域名白名单，以实现微信小程序和OSS Bucket之间的正常通信。

1. 登录OSS管理控制台。

2. 单击Bucket 列表，然后单击目标Bucket名称。

3. 在Bucket内的左侧导航栏，单击概览，然后在访问端口区域查看Bucket域名。

4. 登录微信小程序平台，将上传和下载的合法域名填写为Bucket的外网访问域名。

   

   说明

   实际业务中，建议您将OSS提供的外网域名和您自己的域名进行绑定，以便使用自定义域名访问OSS存储空间中的文件。配置步骤，请参见绑定自定义域名。

步骤2：获取签名

为了您的数据安全，建议使用签名方式上传文件。OSS提供服务端签名和客户端签名两种签名方式。

服务端签名

客户端签名

步骤3：使用微信小程序上传

使用uploadFile接口上传文件，示例代码如下：

const host = '<host>';
const signature = '<signatureString>';
const ossAccessKeyId = '<accessKey>';
const policy = '<policyBase64Str>';
const key = '<object name>';
const securityToken = '<x-oss-security-token>'; 
const filePath = '<filePath>'; // 待上传文件的文件路径。
wx.uploadFile({
  url: host,
  filePath: filePath,
  name: 'file', // 必须填file。
  formData: {
    key,
    policy,
    OSSAccessKeyId: ossAccessKeyId,
    signature,
    // 'x-oss-security-token': securityToken // 使用STS签名时必传。
  },
  success: (res) => {
    if (res.statusCode === 204) {
      console.log('上传成功');
    }
  },
  fail: err => {
    console.log(err);
  }
});

常见问题

• iOS系统使用微信小程序直传后，返回的结果中，为什么ETag参数名称会变为Etag？

  问题原因：使用微信小程序直传后，OSS会返回标准的ETag。但是iOS系统的微信小程序会将返回的ETag转成了Etag，导致客户端调用ETag参数的业务出现问题。

  解决方案：若您的业务涉及多个系统的微信小程序直传场景，建议您将Header中的所有参数名都转成小写进行兼容。

• 上传成功后，如何获取文件URL？

  具体操作，请参见使用文件URL分享文件

• PostObject请求时，报错The bucket POST must contain the specified 'key'. If it is specified, please check the order of the fields.怎么办？

  问题原因：没有指定key表单域。

  解决方案：PostObject请求时必须指定key表单域。更多信息，请参见PostObject。

• 微信小程序是否支持同时上传多个文件？

  不支持，单次调用PostObject接口仅支持上传一个文件。如果您希望通过微信小程序上传多个文件，请循环调用PostObject接口。

• OSS SDK是否支持微信小程序直传？

  不支持。微信小程序直传基于微信小程序API实现，与OSS SDK无关。

• 微信小程序是否支持断点续传？

  OSS基于微信的uploadFile接口上传文件，该接口不支持断点续传。

• 微信小程序是否支持删除OSS资源？

  微信小程序支持删除OSS资源，但是需要您自行实现签名逻辑。