微信小程序上传图片到阿里云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.tempFilePaths
       console.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,不然，默认会返回204
              signature: params.signature,
            },
            success: function(res){
              let imgUrl = params.url + "/"+imgPath
              let _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,//后端返回的policy
      accessid: accessid,//后端返回的accessid
      signature: 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)