写在前面：
本篇致力于解决客户端上传文件，进度到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
<!--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({
/**
* 页面的初始数据
*/
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
