小程序上传一张或多张图片到阿里云OSS

效果图：

效果图

一.准备工作

1.登录阿里云服务器配置需要的参数AccessKeySecret和OSSAccessKeyId。

var fileHost = "http://*****.oss-cn-qingdao.aliyuncs.com/"
var config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`, //默认存在根目录，可根据需求改
  AccessKeySecret: 'xgZVY4DHfBnlmwGlsWivF*****',
  OSSAccessKeyId: 'XfOiw9uc*****L',
  timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

2.Base64,hmac,sha1,crypto相关算法签名算法去下载

3.WeUI组件上传图片（使用方法请参考https://www.jianshu.com/p/010cea4202b8）

4.上传图片主要的代码为：
uploadAliyun.js

const env = require('./config.js');

const Base64 = require('./Base64.js');

require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');


const uploadFile = function (params) {
  if (!params.filePath || params.filePath.length < 9) {
    wx.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', '');

  const aliyunServerURL = env.uploadImageUrl;
  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64);

  console.log('aliyunFileKey=', aliyunFileKey);
  console.log('aliyunServerURL', aliyunServerURL);
  wx.uploadFile({
    url: aliyunServerURL,
    filePath: params.filePath,
    name: 'file',
    formData: {
      //'name': "picture.png",
      'key': aliyunFileKey,
      'policy': policyBase64,
      'OSSAccessKeyId': accessid,
      'signature': signature,
      'success_action_status': '200',
    },
    success: function (res) {
      if (res.statusCode != 200) {
        if (params.fail) {
          params.fail(res)
        }
        return;
      }
      if (params.success) {
        params.success(aliyunFileKey);
      }
    },
    fail: function (err) {
      err.wxaddinfo = aliyunServerURL;
      if (params.fail) {
        params.fail(err)
      }
    },
  })
}

const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.timeout);
  let srcT = date.toISOString();
  const policyText = {
    "expiration": srcT, //设置该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;
}

module.exports = uploadFile;

注意：在小程序的配置位置如图：

项目中js的位置

5.选图片的方法：

chooseImage:function(e){
    var selectPictureNum = e.target.dataset.num;
    this.setData({
      count: 9 - selectPictureNum
    })
    var that = this;
    wx.chooseImage({
      count: that.data.count, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        that.setData({
          filePath: res.tempFilePaths[0],
          images: that.data.images.concat(tempFilePaths)
        })
      },
    })

  },

点击确定上传到的代码（多张图片）：

uploadImg: function(){
    var that = this;
    console.log(JSON.stringify(that.data.uploadImgs))
    for (var i = 0; i < that.data.uploadImgs.length;i++){
      var filePath = that.data.uploadImgs[i];

      uploadImage(
        {
          filePath: filePath,
          dir: "images/",
          success: function (res) {
            console.log("上传成功")
            console.log("上传成功" + JSON.stringify(res))
          },
          fail: function (res) {
            console.log("上传失败")
            console.log(res)
          }
        })
    }
    
  },

uploadImg.wxss代码：

@import "../../weui.wxss"; 

6.上传成功后的结果如图：

结果

其中

images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg

就是在阿里云服务器的图片名称，拼接上"http://yijiao.oss-cn-qingdao.aliyuncs.com/images/http://tmp/wx1b4e5e756cd48af1.o6zAJsws4grEQvYrWTjBigy-6QaU.0llhudiKSF2V955a1c48350d9328ef064b4d36d12746.jpg"才是完整图片。

该demo gitHub的下载地址：https://github.com/dt8888/uploadImage，如有疑问请发简信给我，定会回复。