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

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

前提

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

步骤一:配置 Bucket 跨域

客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。
按照图下面配置就行:
《微信小程序上传图片到阿里云oss方法》

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

1.通过 OSS 控制台查看外网域名。
《微信小程序上传图片到阿里云oss方法》
2.登录微信小程序平台,配置小程序的上传域名白名单。
《微信小程序上传图片到阿里云oss方法》
(以上准备就绪后就开始编写小程序代码啦~)

小程序直接上传

一.获取上传需要的签名(signature)和加密策略(policy)。
1.使用web上传的Dom 进行测试 :下载地址
2.修改 Demo 中 upload.js 的密钥和地址。
《微信小程序上传图片到阿里云oss方法》
3.进行上传测试并得到signature和policy。
《微信小程序上传图片到阿里云oss方法》
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全部内容,如有不足之处望指教。

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

    原文作者:delebasou
    原文地址: https://blog.csdn.net/delebasou/article/details/85237941
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞