小程序前端如何优雅得上传图片 之 【阿里云OSS篇】

苏小K

一说到OSS 可能大家都是想到从后端来操作得OSS  今天我给大家带来一篇 前端上传文件到阿里云OSS

话不多说 搞活  先看看阿里云得

https://help.aliyun.com/document_detail/92883.html?spm=5176.8465980.help.dexternal.4e701450ieeqxk

根据api文档我们可以进行封装下面得方法:

[JavaScript] 纯文本查看 复制代码

const uploadFile = function(filePath, path, successc, failc) {
  if (!filePath || filePath.length < 9) {
    wx.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  //存放图片命名格式：自定义时间戳给图片名字(可以自己改)
  const aliyunFileKey = path + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';

  const aliyunServerURL = env.uploadImageUrl; //OSS地址，https
  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64);

  wx.uploadFile({
    url: aliyunServerURL, //开发者服务器 url
    filePath: filePath, //要上传文件资源的路径
    name: 'file', //必须填file
    formData: {
      'key': aliyunFileKey,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'signature': signature,
      'success_action_status': '200',
    },
    success: function(res) {
      if (res.statusCode != 200) {
        failc(new Error('上传错误:' + JSON.stringify(res)))
        return;
      }
      successc(aliyunServerURL + aliyunFileKey);
    },
    fail: function(err) {
      err.wxaddinfo = aliyunServerURL;
      failc(err);
    },
  })
}

const getPolicyBase64 = function() {
  let date = new Date();
  date.setHours(date.getHours() + env.timeout);
  let srcT = date.toISOString();
  const policyText = {
    "expiration": srcT, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了 
    "conditions": [
      ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
    ]
  };

  const policyBase64 = base64.encode(JSON.stringify(policyText));
  return policyBase64;
}

const getSignature = function(policyBase64) {
  const accesskey = env.AccessKeySecret; 
  const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
    asBytes: true
  });
  const signature = Crypto.util.bytesToBase64(bytes);
  return signature;
}

最主要得是你 OSS上传地址、AccessKeyId、AccessKeySecret  

然后就可以调用方法进行上传了

[JavaScript] 纯文本查看 复制代码

//上传图片
          //图片路径可自行修改【(这二个参数就是你oss地址目录的下一个路径目录，比如:)】
          uploadImage(res.tempFilePaths, 'images/',
            function (result) {
              console.log("======上传成功图片地址为：", result);
              self.setData({
                online_img:result
              })
              
              //这个result就是返给你上传到oss上的地址链接
              wx.hideLoading();
            }, function (result) {
              console.log("======上传失败======", result);
              
              wx.hideLoading()
            }
          )

最后给大家附上一份 Gitee 源码地址：
https://gitee.com/Ldormant/ali-oss



技术交流+q 1164526353

有老板下单得也可以联系我

抖魂

看看

wc888

666666666666666666666666666666

znsong

好东西必须下载。。

18074941457

好东西必须下载。。。。

18074941457

感谢大佬分享

Stream

感谢大佬分享

lq850815

谢谢分享

douluodalu

感谢发布原创作品，因你更精彩！

973992555

感谢大佬分享