微信小程序中调用阿里云 OSS（Object Storage Service）上传文件
在微信小程序中调用阿里云 OSS（Object Storage Service）上传文件，可以通过以下步骤实现。由于微信小程序的运行环境是浏览器环境的一个子集，因此需要使用适合小程序的 OSS SDK 或手动实现上传逻辑。
1. 准备工作
1.1 获取阿里云 OSS 配置
Bucket 名称：你的 OSS 存储桶名称。
Region：存储桶所在的地域（如 osscnhangzhou）。
AccessKeyId 和 AccessKeySecret：阿里云账号的访问密钥（建议使用 STS 临时凭证以提高安全性）。
1.2 安装 OSS SDK
微信小程序不支持直接使用 Node.js 的 alioss SDK，因此需要使用适用于小程序的 OSS SDK，或者手动实现上传逻辑。
2. 使用小程序 OSS SDK
阿里云官方提供了一个适用于小程序的 OSS SDK：[aliosswxsdk](https://github.com/alisdk/aliosswxsdk)。
2.1 安装 SDK
在小程序项目中安装 SDK：
bash
npm install aliosswxsdk
2.2 初始化 OSS 客户端
在小程序的 app.js 或页面逻辑中初始化 OSS 客户端：
javascript
const OSS = require('aliosswxsdk');
const client = new OSS({
region: 'osscnhangzhou', // 你的 OSS Region
accessKeyId: 'youraccesskeyid', // 你的 AccessKeyId
accessKeySecret: 'youraccesskeysecret', // 你的 AccessKeySecret
bucket: 'yourbucketname', // 你的 Bucket 名称
});
2.3 上传文件
在小程序中选择文件并上传：
javascript
Page({
data: {
filePath: '',
},
// 选择文件
chooseFile() {
const that = this;
wx.chooseImage({
count: 1,
success(res) {
const tempFilePaths = res.tempFilePaths;
that.setData({
filePath: tempFilePaths[0],
});
that.uploadFile(tempFilePaths[0]);
},
});
},
// 上传文件
uploadFile(filePath) {
const fileName = filePath.split('/').pop(); // 获取文件名
const fileKey = uploads/${fileName}; // 设置 OSS 上的文件路径
client.put(fileKey, filePath).then((res) => {
console.log('上传成功', res);
wx.showToast({
title: '上传成功',
icon: 'success',
});
}).catch((err) => {
console.error('上传失败', err);
wx.showToast({
title: '上传失败',
icon: 'none',
});
});
},
});
2.4 页面布局
在小程序的页面布局中添加一个按钮，用于触发文件选择和上传：
xml
<view>
<button bindtap="chooseFile">选择文件并上传</button>
</view>
3. 使用 STS 临时凭证（推荐）
为了安全起见，建议使用 STS（Security Token Service）临时凭证来上传文件。你可以在后端生成临时凭证，然后传递给小程序前端使用。
3.1 后端生成 STS 临时凭证
在后端（如 Node.js）中生成 STS 临时凭证：
javascript
const STS = require('alioss').STS;
const sts = new STS({
accessKeyId: 'youraccesskeyid',
accessKeySecret: 'youraccesskeysecret',
});
sts.assumeRole('yourrolearn', 'yourpolicy', 3600, 'yoursessionname').then((result) => {
console.log(result.credentials);
}).catch((err) => {
console.error(err);
});
3.2 小程序使用 STS 临时凭证
在小程序中使用 STS 临时凭证初始化 OSS 客户端：
javascript
const client = new OSS({
region: 'osscnhangzhou',
accessKeyId: 'yourstsaccesskeyid',
accessKeySecret: 'yourstsaccesskeysecret',
stsToken: 'yourststoken',
bucket: 'yourbucketname',
});
4. 手动实现上传逻辑
如果你不想使用 SDK，可以手动实现 OSS 文件上传逻辑。以下是基于微信小程序 wx.uploadFile 的实现：
4.1 获取上传签名
首先，从后端获取 OSS 上传签名（包括 Policy 和 Signature）。
4.2 上传文件
使用 wx.uploadFile 上传文件：
javascript
wx.uploadFile({
url: 'https://yourbucketname.osscnhangzhou.aliyuncs.com', // OSS 上传地址
filePath: filePath, // 文件路径
name: 'file', // 文件字段名
formData: {
key: uploads/${fileName}, // OSS 上的文件路径
policy: 'yourpolicy', // 从后端获取的 Policy
OSSAccessKeyId: 'youraccesskeyid', // 从后端获取的 AccessKeyId
signature: 'yoursignature', // 从后端获取的 Signature
success_action_status: '200', // 上传成功后的状态码
},
success(res) {
console.log('上传成功', res);
wx.showToast({
title: '上传成功',
icon: 'success',
});
},
fail(err) {
console.error('上传失败', err);
wx.showToast({
title: '上传失败',
icon: 'none',
});
},
});
5. 注意事项
文件大小限制：微信小程序上传文件大小限制为 10MB，如果需要上传更大的文件，可以使用分片上传。
安全性：不要在前端代码中暴露 AccessKeyId 和 AccessKeySecret，建议使用 STS 临时凭证。
跨域问题：确保 OSS 的 Bucket 配置了正确的 CORS 规则，允许微信小程序的域名访问。
总结
使用 aliosswxsdk 可以方便地在微信小程序中上传文件到阿里云 OSS。
推荐使用 STS 临时凭证以提高安全性。
如果需要手动实现上传逻辑，可以使用 wx.uploadFile 并配合后端生成的签名。