支持微信小程序、H5、PC端web使用，整套文件进行封装统一使用
开发背景：做类似发布朋友圈的功能需求，由于后端对发布功能只提供一个接口，文字、状态、文件上传统一一个接口上传，且对文件上传方面做的接口存在诸多问题（人已经整麻了），包括各种数据结构的转换迎合后端，为节省时间和甩锅，被迫从客户端直传阿里云服务器，绕开服务端进行文件上传等操作，中间base64处理、加密策略，计算签名等处理都在前端完成。
优点：减少服务器压力
缺点：客户端目前不能直接预览文件，还需进一步在客户端处理（还在研究中）
具体做法见官方文档：如何在微信小程序环境下将文件上传到OSS_对象存储-阿里云帮助中心
一.文件解释
二.配置文件代码
config.js
let fileHost = "https://xxxxxx.oss-***-beijing.aliyuncs.***"; //阿里云OSS的文件根域名
let config = {
//aliyun OSS config
uploadImageUrl: `${fileHost}`, //默认存在根目录，可根据需求改
A***essKeySecret: 'xxxxxxxx', // 这里的配置找运维或者阿里云OSS的管理者要对应的账号和密钥就可以了
OSSA***essKeyId: 'xxxxxxxx', // 这里的配置找运维或者阿里云OSS的管理者要对应的账号和密钥就可以了
timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config
const Base64 = {
// private property
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
// public method for encoding
encode: function (input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = Base64._utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
}
return output;
},
// public method for decoding
decode: function (input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = this._keyStr.indexOf(input.charAt(i++));
enc2 = this._keyStr.indexOf(input.charAt(i++));
enc3 = this._keyStr.indexOf(input.charAt(i++));
enc4 = this._keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = Base64._utf8_decode(output);
return output;
},
// private method for UTF-8 encoding
_utf8_encode: function (string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
},
// private method for UTF-8 decoding
_utf8_decode: function (utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
module.exports = Base64;
crypto.js
const Crypto = {};
(function(){
var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// Crypto utilities
var util = Crypto.util = {
// Bit-wise rotate left
rotl: function (n, b) {
return (n << b) | (n >>> (32 - b));
},
// Bit-wise rotate right
rotr: function (n, b) {
return (n << (32 - b)) | (n >>> b);
},
// Swap big-endian to little-endian and vice versa
endian: function (n) {
// If number given, swap endian
if (n.constructor == Number) {
return util.rotl(n, 8) & 0x00FF00FF |
util.rotl(n, 24) & 0xFF00FF00;
}
// Else, assume array and swap all items
for (var i = 0; i < n.length; i++)
n[i] = util.endian(n[i]);
return n;
},
// Generate an array of any length of random bytes
randomBytes: function (n) {
for (var bytes = []; n > 0; n--)
bytes.push(Math.floor(Math.random() * 256));
return bytes;
},
// Convert a string to a byte array
stringToBytes: function (str) {
var bytes = [];
for (var i = 0; i < str.length; i++)
bytes.push(str.charCodeAt(i));
return bytes;
},
// Convert a byte array to a string
bytesToString: function (bytes) {
var str = [];
for (var i = 0; i < bytes.length; i++)
str.push(String.fromCharCode(bytes[i]));
return str.join("");
},
// Convert a string to big-endian 32-bit words
stringToWords: function (str) {
var words = [];
for (var c = 0, b = 0; c < str.length; c++, b += 8)
words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32);
return words;
},
// Convert a byte array to big-endian 32-bits words
bytesToWords: function (bytes) {
var words = [];
for (var i = 0, b = 0; i < bytes.length; i++, b += 8)
words[b >>> 5] |= bytes[i] << (24 - b % 32);
return words;
},
// Convert big-endian 32-bit words to a byte array
wordsToBytes: function (words) {
var bytes = [];
for (var b = 0; b < words.length * 32; b += 8)
bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF);
return bytes;
},
// Convert a byte array to a hex string
bytesToHex: function (bytes) {
var hex = [];
for (var i = 0; i < bytes.length; i++) {
hex.push((bytes[i] >>> 4).toString(16));
hex.push((bytes[i] & 0xF).toString(16));
}
return hex.join("");
},
// Convert a hex string to a byte array
hexToBytes: function (hex) {
var bytes = [];
for (var c = 0; c < hex.length; c += 2)
bytes.push(parseInt(hex.substr(c, 2), 16));
return bytes;
},
// Convert a byte array to a base-64 string
bytesToBase64: function (bytes) {
// Use browser-native function if it exists
if (typeof btoa == "function") return btoa(util.bytesToString(bytes));
var base64 = [],
overflow;
for (var i = 0; i < bytes.length; i++) {
switch (i % 3) {
case 0:
base64.push(base64map.charAt(bytes[i] >>> 2));
overflow = (bytes[i] & 0x3) << 4;
break;
case 1:
base64.push(base64map.charAt(overflow | (bytes[i] >>> 4)));
overflow = (bytes[i] & 0xF) << 2;
break;
case 2:
base64.push(base64map.charAt(overflow | (bytes[i] >>> 6)));
base64.push(base64map.charAt(bytes[i] & 0x3F));
overflow = -1;
}
}
// Encode overflow bits, if there are any
if (overflow != undefined && overflow != -1)
base64.push(base64map.charAt(overflow));
// Add padding
while (base64.length % 4 != 0) base64.push("=");
return base64.join("");
},
// Convert a base-64 string to a byte array
base64ToBytes: function (base64) {
// Use browser-native function if it exists
if (typeof atob == "function") return util.stringToBytes(atob(base64));
// Remove non-base-64 characters
base64 = base64.replace(/[^A-Z0-9+\/]/ig, "");
var bytes = [];
for (var i = 0; i < base64.length; i++) {
switch (i % 4) {
case 1:
bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) |
(base64map.indexOf(base64.charAt(i)) >>> 4));
break;
case 2:
bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) |
(base64map.indexOf(base64.charAt(i)) >>> 2));
break;
case 3:
bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) |
(base64map.indexOf(base64.charAt(i))));
break;
}
}
return bytes;
}
};
// Crypto mode namespace
Crypto.mode = {};
})();
module.exports = Crypto;
hmac.js
const Crypto = require('./crypto.js'); (function(){ // Shortcut var util = Crypto.util; Crypto.HMAC = function (hasher, message, key, options) { // Allow arbitrary length keys key = key && key.length > hasher._blocksize * 4 ? hasher(key, { asBytes: true }) : util.stringToBytes(key); // XOR keys with pad constants var okey = key, ikey = key.slice(0); for (var i = 0; i < hasher._blocksize * 4; i++) { okey[i] ^= 0x5C; ikey[i] ^= 0x36; } var hmacbytes = hasher(util.bytesToString(okey) + hasher(util.bytesToString(ikey) + message, { asString: true }), { asBytes: true }); return options && options.asBytes ? hmacbytes : options && options.asString ? util.bytesToString(hmacbytes) : util.bytesToHex(hmacbytes); }; })(); module.exports = Crypto;sha1.js
const Crypto = require('./crypto.js'); (function(){ // Shortcut var util = Crypto.util; // Public API var SHA1 = Crypto.SHA1 = function (message, options) { var digestbytes = util.wordsToBytes(SHA1._sha1(message)); return options && options.asBytes ? digestbytes : options && options.asString ? util.bytesToString(digestbytes) : util.bytesToHex(digestbytes); }; // The core SHA1._sha1 = function (message) { var m = util.stringToWords(message), l = message.length * 8, w = [], H0 = 1732584193, H1 = -271733879, H2 = -1732584194, H3 = 271733878, H4 = -1009589776; // Padding m[l >> 5] |= 0x80 << (24 - l % 32); m[((l + 64 >>> 9) << 4) + 15] = l; for (var i = 0; i < m.length; i += 16) { var a = H0, b = H1, c = H2, d = H3, e = H4; for (var j = 0; j < 80; j++) { if (j < 16) w[j] = m[i + j]; else { var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16]; w[j] = (n << 1) | (n >>> 31); } var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + ( j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 : j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 : j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 : (H1 ^ H2 ^ H3) - 899497514); H4 = H3; H3 = H2; H2 = (H1 << 30) | (H1 >>> 2); H1 = H0; H0 = t; } H0 += a; H1 += b; H2 += c; H3 += d; H4 += e; } return [H0, H1, H2, H3, H4]; }; // Package private blocksize SHA1._blocksize = 16; })(); module.exports = Crypto;
readme.md
# 上传文件到阿里云
## 说明
> 开发框架是uniapp，项目实战，打包到微信小程序及H5都是可以正常上传的。
## 配置说明
> 只需要在config.js中，添加相关的配置就可以使用了。
## 上传阿里云的文件目录地址
> 可按环境区分，也可以写死，根据自己项目需求配置。batchUploadAliyun.js中集成了单个文件上传及多个文件上传的方法封装。
## 上传文件的入参示例
> {"type": 1, "tempFilePath": "xxx.png", "":""},type是根据自己业务定义的文件类型。如不需要可删除该参数；
## 出参示例
> 由于上传阿里云OSS只返回成功或者失败状态，所以代码中，在成功后，手动拼接了完整的url返回出来。{"type":1, "tempFilePath": "xxx.png", "url":"手动拼接的完整url"}
## 疑问解答
> 如有疑问或不理解的地方，可私信我，共同探讨。
三.核心代码
1.h5、pc端代码
const uploadAliOss = require('./uploadAliyun.js');
let env = process.env.NODE_ENV;
const dirObj = { 1: env + '/img/', 2: env + '/video/' };
// 批量上传文件到阿里云oss;
export function batchUploadAliyun(arr){
return new Promise(async (resolve, reject) => {
let result = [];
for( let i=0; i<arr.length; i++){
await uploadfileAliyun(arr[i]).then(res => {
result.push(res);
});
}
resolve(result);
}).catch(err => { reject(err) });
}
// 上传单个文件到阿里云oss;
export function uploadfileAliyun(fileInfo){
return new Promise((resolve, reject) => {
const type = fileInfo['type'];
let filePath = fileInfo['tempFilePath'];
uploadAliOss({
filePath: filePath,
dir: dirObj[type],
su***ess: function (res) {
let result = {};
Object.keys(fileInfo).forEach(it => {
if(it !== 'path' && it !== 'tempFilePath'){
result[it] = fileInfo[it];
}
});
result['url'] = res;
resolve(result);
},
fail: function (err) {
reject(err);
}
})
}).catch(err => { reject(err) });
}
2.微信小程序
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) {
uni.showModal({ title: '文件错误', content: '请重试', showCancel: false });
uni.hideLoading();
return false;
}
const aliyunFileKey = params.dir;
const aliyunServerURL = env.uploadImageUrl;
const a***essid = env.OSSA***essKeyId;
const policyBase64 = getPolicyBase64();
const signature = getSignature(policyBase64);
uni.uploadFile({
url: aliyunServerURL,
filePath: params.filePath,
name: 'file',
formData: {
'key': aliyunFileKey,
'policy': policyBase64,
'OSSA***essKeyId': a***essid,
'signature': signature,
'su***ess_action_status': '200'
},
su***ess: function (res) {
console.log('成功回调',res);
if (res.statusCode != 200) {
if(params.fail){
params.fail(res)
}
return;
}
if(params.su***ess){
let result = aliyunServerURL + '/' + aliyunFileKey;
params.su***ess(result);
}
},
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, 30 * 1024 * 1024] // 设置上传文件的大小限制,30mb
]
};
const policyBase64 = Base64.encode(JSON.stringify(policyText));
return policyBase64;
}
const getSignature = function (policyBase64) {
const a***esskey = env.A***essKeySecret;
const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, a***esskey, {
asBytes: true
});
const signature = Crypto.util.bytesToBase64(bytes);
return signature;
}
module.exports = uploadFile;
四.小程序实战运用
仿上述小程序代码，根据实际要求封装
注意：微信小程序配置域名白名单，需要在微信开发者配置（官网），以实现微信小程序和OSS Bucket之间的正常通信。
1.小程序上传至阿里云服务器必传参数
| 参数 |
是否必选 |
说明 |
| host |
是 |
填写Bucket的访问域名，例如https://examplebucket.oss-***-zhangjiakou.aliyuncs.***。如果您的Bucket已绑定自定义域名，建议填写您的自定义域名。 |
| signature |
是 |
填写步骤3 中获取到的signature信息。 |
| ossA***essKeyId |
是 |
填写您的A***essKey ID。如果您是通过STS获取的临时用户，则填写临时用户的A***essKey ID。 |
| policy |
是 |
填写步骤3 中获取到的policy信息。 |
| key |
是 |
设置文件上传至OSS后的文件路径。例如，您需要将myphoto.jpg上传至test文件夹下，则填写test/myphoto.jpg。 |
| securityToken |
是 |
如果使用STS认证，则填写步骤3 中使用客户端签名获取到的SecurityToken。 |
| filePath |
是 |
填写待上传文件的本地完整路径，例如D:\example.txt。 |
2.效果图
2.代码块
<template>
<view class="avatar" @click="changeAvatarSheet" :Url="imgUrl"> + </view>
</template>
<script>
import env from '../../utils/OssUpload/config.js'
import Base64 from '../../utils/OssUpload/Base64.js'
import Crypto from '../../utils/OssUpload/crypto.js'
require('../../utils/OssUpload/hmac.js')
require('../../utils/OssUpload/sha1.js')
export default {
data() {
return {
arrImg: [],
imgUrl: '',
imgUrlObj: [],
}
},
methods: {
// About Change Avatar of users
// 1.换头像的途径菜单 wx.showActionSheet,选择菜单
// 调用wx.showActionSheet，作选择菜单
changeAvatarSheet() {
var that = this
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'],
itemColor: '',
su***ess: function (res) {
console.log('res', res)
if (!res.cancel) {
if (res.tapIndex == 0) {
// 调用函数
that.chooseWxImageShop('album')
} else if (res.tapIndex == 1) {
//手机拍照
// console.log(res.tapIndex);
// 调用函数
that.chooseWxImageShop('camera')
}
}
},
})
},
// 2.wx.chooseImage
// 3.上传头像到数据库 wx.uploadFile
chooseWxImageShop: function (type) {
// console.log('1111', uploadfileAliyun)
wx.chooseMedia({
count: 4,
sizeType: ['original', '***pressed'],
sourceType: [type],
su***ess: (res) => {
console.log('params', res)
const params = res.tempFiles[0].tempFilePath
if (!params) {
uni.showModal({
title: '文件错误',
content: '请重试',
showCancel: false,
})
uni.hideLoading()
return false
}
//获取年月日
const date = new Date()
const year = date.getFullYear()
const month =
date.getMonth() + 1 < 10
? '0' + (date.getMonth() + 1)
: date.getMonth() + 1
const day =
date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const hm = date.getMilliseconds()
const time = year + month + day + hour + minute + second + hm
//获取文件后缀名
const fileExt = params.substring(params.lastIndexOf('.') + 1)
const aliyunFileKey = 'qifu/back_app/dt_media/' + time + '.' + fileExt //拼接文件名
const aliyunServerURL = env.uploadImageUrl
const a***essid = env.OSSA***essKeyId
const policyBase64 = this.getPolicyBase64()
const signature = this.getSignature(policyBase64)
uni.uploadFile({
url: aliyunServerURL,
filePath: params,
name: 'file',
formData: {
key: aliyunFileKey,
policy: policyBase64,
OSSA***essKeyId: a***essid,
signature: signature,
su***ess_action_status: '200',
},
su***ess: function (res) {
console.log('res-->', res)
if (res.statusCode != 200) {
if (params.fail) {
params.fail(res)
}
return
}
wx.showToast({
title: '添加图片成功',
})
// if (params.su***ess) {
// let result = aliyunServerURL + '/' + aliyunFileKey
// params.su***ess('成功回调-拼接路径', result)
// }
//文件名做个保存，后端需要根据这个文件名来获取图片
// console.log('sdkUrl',sdkUrl);
// console.log('this.Url', this.Url)
},
fail: function (err) {
console.log('err-->', err)
err.wxaddinfo = aliyunServerURL
if (params.fail) {
params.fail(err)
}
wx.showToast({
title: '添加图片失败',
})
},
})
// const imgUrlObj= {
// id: 0,
// src: aliyunFileKey
// }
this.arrImg.push(aliyunFileKey)
//用map创建一个对象，然后把对象循环遍历放入数组中，且有唯一的id
this.imgUrlObj = this.arrImg.map((item, index) => {
return {
id: index,
src: aliyunFileKey,
}
})
console.log('imgUrlObj', this.imgUrlObj);
// this.arrImg.push(imgUrlObj)
return this.$emit('changeUrl', this.imgUrlObj)
},
})
},
//上传到阿里云
// 上传单个文件到阿里云oss;
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, 30 * 1024 * 1024], // 设置上传文件的大小限制,30mb
],
}
const policyBase64 = Base64.encode(JSON.stringify(policyText))
return policyBase64
},
getSignature: function (policyBase64) {
const a***esskey = env.A***essKeySecret
const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, a***esskey, {
asBytes: true,
})
const signature = Crypto.util.bytesToBase64(bytes)
return signature
},
},
}
</script>
<style lang="scss" scoped>
.avatar {
width: 100rpx;
height: 100rpx;
line-height: 100rpx;
text-align: center;
// border-radius: 50%;
overflow: hidden;
border: 1px solid #625f5f;
img {
width: 100%;
height: 100%;
}
}
</style>
