微信小程序上传图片到阿里云oss方法

最近开发微信小程序要求上传图片到阿里云oss上，所以就顺手整理一下整个过程啦。

前提

开通oss服务和创建oss存储空间啦（这个就自己去解决吧）下面接入正题：

步骤一：配置 Bucket 跨域

客户端进行表单直传到 OSS 时，会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则（CORS）的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。
按照图下面配置就行：

步骤 2：配置外网域名到小程序的上传域名白名单中

1.通过 OSS 控制台查看外网域名。

2.登录微信小程序平台，配置小程序的上传域名白名单。

（以上准备就绪后就开始编写小程序代码啦~）

小程序直接上传

一.获取上传需要的签名（signature）和加密策略（policy）。
1.使用web上传的Dom 进行测试：下载地址
2.修改 Demo 中 upload.js 的密钥和地址。

3.进行上传测试并得到signature和policy。

4.使用小程序代码上传图片

 wx.chooseImage({success: function (res) {var tempFilePaths = res.tempFilePathsconsole.log('chooseImage success, temp path is: ', tempFilePaths[0])wx.uploadFile({url: 'xxxxxxx',//上传的路径filePath: tempFilePaths[0],name: 'file',formData: {name: tempFilePaths[0],key: "${filename}",//上传图片的名字和路径（默认路径根目录，自定义目录：xxx/xxx.png）policy: "xxxxxxxxxxxxxxxxxxxxxx",OSSAccessKeyId: "xxxxxxxxxxxxxxxx",success_action_status: "200",signature: "xxxxxxxxxxxxxxx",},success: function (res) {console.log('chooseImage success, temp path is: ', tempFilePaths[0])wx.showToast({title: "上传成功",icon: 'success',duration: 1000})},fail: function ({errMsg}) {console.log('upladImage fail, errMsg is: ', errMsg)wx.showToast({title: "上传失败",duration: 1000})},})}})

二、后台返回签名（signature）和加密策略（policy）。
（上述“一”方法中由于有accessid/accesskey暴露在外，有泄漏的风险）所以建议使用后端签名：
大概流程：请求后端接口–>获取返回的签名等所用到的数据–>调用上述 “一（4）”中的方法即可，整理后如下：

 //上传图片到阿里云
function uploadImgFile(params = {}) {let data = new Promise((resolve, reject) => {wx.chooseImage({count: 1,sizeType: ["compressed"],sourceType: ["album"],success: function (res) {//console.log(res);const imgsrc = res.tempFilePaths[0];const index = imgsrc.lastIndexOf("\.");const imgExtension = imgsrc.substring(index + 1, imgsrc.length);const imgPath = params.fileName + "." + imgExtension;wx.uploadFile({url: params.url,//上传地址,filePath: imgsrc,name: 'file',formData: {name: imgsrc,key: imgPath,//文件上传的位置(默认根目录)+文件名字 默认："$(filename)"policy: params.policy,OSSAccessKeyId: params.accessid,success_action_status: '200', //让服务端返回200,不然，默认会返回204signature: params.signature,},success: function(res){let imgUrl = params.url + "/"+imgPathlet _obj = Object.assign({ imgUrl: imgUrl }, res);resolve(_obj);}, fail: function(res){reject("上传失败");}})},})})return data;
}
//调用时
let obj = {url: "xxxxxxxxxx",//上传路径fileName: "xxx/" + new Date().getTime(),//上传到xxx文件夹下（我这里图片重新命名）policy: policy,//后端返回的policyaccessid: accessid,//后端返回的accessidsignature: signature,//后端返回的signature}uploadImgFile(obj).then(function (res) {//console.log(res)if (res.statusCode==200){let src = res.imgUrl;//返回上传的图片地址}else{wx.showToast({title: res.errMsg,icon:'none',duration:2000,})}}).catch(function (err) {console.log('err:' + err);})

以上为自己整理的微信上传图片到oss全部内容，如有不足之处望指教。
注：至于评论中提到请求403问题请参考一下官方文档可能对你会有帮助：https://help.aliyun.com/document_detail/32077.html?spm=a2c4g.11186623.6.1220.1e4177a3nVKaEc

参考文档：(https://help.aliyun.com/document_detail/92883.html?spm=a2c4g.11186623.6.670.5265350asB84kG)