小程序客户端直接上传文件至阿里云oss

写在前面：

本篇致力于解决客户端上传文件，进度到99%后长时间卡顿问题。
传统方案：调用服务端接口，将文件传至服务端，由服务端上传至oss。
引起的问题：服务端上传至oss的等待时间客户端监听不到，进度卡在99%，需要服务端上传完成才有响应。
本篇方案：由客户端直接调用阿里云sdk上传至oss。

参考阿里云官网JavaScript直传oss方案，同样适用于PC或移动端的浏览器终端。
阿里云官网JavaScript直传Demo链接：https://help.aliyun.com/document_detail/31925.html

准备工作

下载Base64.js和Crypto.js（小程序的Crypto没有window对象，文件内容附在本篇末）,存放至小程序utils文件夹下

步骤一

在utils文件夹下创建配置文件oss-upload.js，复制以下内容，其中accessid，accesskey，host替换为你自己的阿里云oss配置。

const Base64 = require("./base64");
const Crypto = require("./crypto-js");
var accessid= 'xxxxx';
var accesskey= 'xxxxxxxxxxxxx';
var host = 'https://xxxxxxxx.aliyuncs.com';

var g_dirname = ''
var g_object_name = ''
var g_object_name_type = ''
var pos = ""
var suffix =''
// var now = timestamp = Date.parse(new Date()) / 1000; 

var policyText = {
    "expiration": "2023-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
    "conditions": [
    ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
    ]
};

var policyBase64 = Base64.encode(JSON.stringify(policyText))
var message = policyBase64
var bytes = Crypto.HmacSHA1( message, accesskey, { asBytes: true }) ;
var signature = Crypto.enc.Base64.stringify(bytes);

function random_string(len) {
　　len = len || 32;
　　var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
　　var maxPos = chars.length;
　　var pwd = '';
　　for (var i = 0; i < len; i++) {
    　　pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

function get_suffix(filename) {
    pos = filename.lastIndexOf('.')
    suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}

var calculate_object_name = function(filename)
{
    suffix = get_suffix(filename)
    g_object_name = random_string(10) + suffix
    return g_object_name
}

const ossConfig = {
  host:host,
  randomName:calculate_object_name,
  policy:policyBase64,
  OSSAccessKeyId:accessid,
  signature:signature,
}

const upLoadOss = function(data) {
  return new Promise((resolve, reject) => {
    var fileName = calculate_object_name(data.name);
    console.log(fileName)
    
  })
}

module.exports = ossConfig;

步骤二

准备你的上传页面upload.wxml

上传文件
上传进度：{{progressNum}}%

  上传成功，文件访问路径：{{ossUrl}}

步骤三

上传页面引入配置文件，并在wx.uploadFile方法中使用配置信息

// pages/upload/upload.js
const ossConfig = require("../../utils/oss-upload")
console.log(ossConfig)
Page({

  /**
   * 页面的初始数据
   */
  data: {
    progressNum:0,
    success:false,
    ossUrl:'',  //上传成功没有返回，自行拼接
  },
  uploadFile() {
    var that = this;
    wx.chooseMessageFile({
      count: 1,
      type: "all",
      success(res) {
        console.log(res);
        if(res.errMsg=="chooseMessageFile:ok"){
          var file = res.tempFiles[0];
          var fileName = ossConfig.randomName(file.name) //生成随机文件名
          console.log(fileName)
          const uploadTask = wx.uploadFile({
            filePath: file.path,
            name: 'file',
            url: ossConfig.host,
            header: {
              "Content-Type": "multipart/form-data",
              'token': wx.getStorageInfoSync("token")
            },
            formData: {
              'key': fileName,
              'policy': ossConfig.policy,
              'OSSAccessKeyId': ossConfig.OSSAccessKeyId,
              'signature': ossConfig.signature,
              'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
            },
            success(resp) {
              console.log(resp)
              console.log(ossConfig.host + '/' + fileName)
              that.setData({
                success:true,
                ossUrl: ossConfig.host + '/' + fileName,  //拼接资源地址
              })
            },
            fail(err) {
              console.log(err);
            }
          })
          //监听上传进度
          uploadTask.onProgressUpdate((progressInfo) => {
            that.setData({
              progressNum:progressInfo.progress,
            })
          })
        }
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
})

附件

crypto-js.js
https://pan.baidu.com/s/1OVn2Z1zyeGrVm4pa3RRMBw?pwd=vjqi

base64.js
https://pan.baidu.com/s/1SzvRQXRE-C-On-OJmlzZ_w?pwd=tccf