微信小程序,图片上传阿里云oss。写一个例子
时间: 2024-02-11 22:06:47 浏览: 104
微信小程序上传图片到阿里云oss
5星 · 资源好评率100%
好的,以下是一个简单的微信小程序中图片上传到阿里云OSS的例子:
1. 在微信小程序中,使用wx.chooseImage()方法选择需要上传的图片,并将其保存在本地变量tempFilePaths中。
```
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths;
// 上传图片到阿里云OSS
uploadImage(tempFilePaths[0]);
}
})
```
2. 编写上传图片的函数uploadImage(),其中需要设置header、formData、name、url等参数,并调用wx.uploadFile()方法上传图片。
```
function uploadImage(filePath) {
// 阿里云OSS的Bucket名称和上传文件夹名称
var bucketName = 'your-bucket-name';
var folderName = 'your-folder-name/';
// 生成上传文件的唯一key
var timestamp = new Date().getTime();
var key = folderName + timestamp + '-' + Math.floor(Math.random() * 10000) + '.jpg';
// 生成OSS的上传接口地址
var policyBase64 = 'your-policy-base64';
var signature = 'your-signature';
var aliyunUrl = 'https://' + bucketName + '.oss-cn-hangzhou.aliyuncs.com';
// 设置header和formData
var header = {
'content-type': 'multipart/form-data'
};
var formData = {
'key': key,
'policy': policyBase64,
'OSSAccessKeyId': 'your-access-key-id',
'success_action_status': '200',
'signature': signature
};
// 调用wx.uploadFile()方法上传图片
wx.uploadFile({
url: aliyunUrl,
filePath: filePath,
name: 'file',
header: header,
formData: formData,
success: function(res) {
// 上传成功,获取图片URL地址
var imageUrl = aliyunUrl + '/' + key;
console.log('上传成功,图片URL地址为:' + imageUrl);
},
fail: function(res) {
// 上传失败
console.log('上传失败:' + res.errMsg);
}
})
}
```
需要注意的是,以上代码仅为一个示例,实际使用时需要按照阿里云OSS的规定进行设置,并在后端服务中编写相应的签名验证逻辑。
阅读全文