寫在前面：

本篇致力于解決客戶端上傳文件，進度到99%后長時間卡頓問題。
傳統(tǒng)方案：調(diào)用服務端接口，將文件傳至服務端，由服務端上傳至oss。
引起的問題：服務端上傳至oss的等待時間客戶端監(jiān)聽不到，進度卡在99%，需要服務端上傳完成才有響應。
本篇方案：由客戶端直接調(diào)用阿里云sdk上傳至oss。

參考阿里云官網(wǎng)JavaScript直傳oss方案，同樣適用于PC或移動端的瀏覽器終端。
阿里云官網(wǎng)JavaScript直傳Demo鏈接：https://help.aliyun.com/document_detail/31925.html

準備工作

下載Base64.js和Crypto.js（小程序的Crypto沒有window對象，文件內(nèi)容附在本篇末）,存放至小程序utils文件夾下

步驟一

在utils文件夾下創(chuàng)建配置文件oss-upload.js，復制以下內(nèi)容，其中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

<!--pages/upload/upload.wxml-->
<button bindtap="uploadFile">上傳文件</button>
<view style="font-size: 20px;margin-top: 20px;text-align: center;">上傳進度：{{progressNum}}%</view>
<view style="font-size: 14px;margin-top: 20px;padding: 0 20px;" wx:if="{{success}}">
  上傳成功，文件訪問路徑：{{ossUrl}}
</view>

步驟三

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

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

  /**
   * 頁面的初始數(shù)據(jù)
   */
  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);
            }
          })
          //監(jiān)聽上傳進度
          uploadTask.onProgressUpdate((progressInfo) => {
            that.setData({
              progressNum:progressInfo.progress,
            })
          })
        }
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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