uni-app实现阿里直传
需下载bundle.js文件，本人已上传可直接下载 bundle.js
提示：我是把方法单独封装起来了，方便调用
一、方法封装utils/common.js
1.下载上方的bundle.js，并引入
代码如下（示例）：只需把你的bucketName、accessid、accesskey填入下方,然后修改fileName存储到阿里云的路径也是文件的地址
import {
Crypto,
Base64
} from '@/utils/bundle.js'; //引入上面的代码
export const alUploadImage = function(path, showLoading = true) {
return new Promise((resolve, reject) => {
let date = new Date(new Date().getTime() + 1000 * 3600);
let expiration = date.toISOString();
//let expiration = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+'T'+date.getHours()+':'+date.getMinutes()+':00.000Z';
let policyText = {
expiration, //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
"conditions": [
["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
]
};
let bucketName = ''; //你的bucketName
let policyBase64 = Base64.encode(JSON.stringify(policyText))
let accessid = ''; //你的阿里oss accessid
let accesskey = ''; //你的阿里oss secret
let host = 'http://' + bucketName + '.oss-cn-shanghai.aliyuncs.com'; //上传oss地址,注意地区对不对,我这示例给的是shanghai
let bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
asBytes: true
});
let signature = Crypto.util.bytesToBase64(bytes); //签名
// 在阿里云存储路径=>文件地址,地址根据公司或本人要求生成，下方仅为示例
let fileName = 'App/' + '示例20230320,可以自定义方法获取当天的日期' + '/' + '示例随机字符串,可以随机生成32位字符串' + '.' + path.split('.').pop(); //文件名 注意：相同文件名会覆盖之前的文件
if (showLoading) uni.showLoading({
mask: true,
title: '上传中..'
})
uni.uploadFile({
url: host,
filePath: path,
fileType: '',
name: 'file',
formData: {
name: fileName,
key: fileName, //文件名
policy: policyBase64, // 输入你获取的的policy
OSSAccessKeyId: accessid, // 输入你的AccessKeyId
success_action_status: '200', // 让服务端返回200,不然，默认会返回204
signature, // 输入你获取的的signature
},
success: (res) => {
if (showLoading) uni.hideLoading()
res.file = host + '/' + fileName
resolve(res)
},
fail: (res) => {
if (showLoading) uni.hideLoading()
reject(false)
}
})
})
}
二、全局注册 main.js
代码如下（示例）：
import {
alUploadImage } from 'utils/common.js'
Vue.prototype.$alUploadImage = alUploadImage
三、页面调用
代码如下（示例）：
//第一个参数uni.chooseImage返回的地址，第二个参数是否显示uni.showLoading
// 单文件上传
this.$alUploadImage('uni.chooseImage返回的地址', false).then(res=>{
console.log(res)
})
// 多文件上传，Promise.all
let files= [],postList = [];
// this.filseList临时存储选择的本地文件
for (let i in this.filseList) {
postList.push(this.$alUploadImage(this.filseList[i], false));
}
Promise.all(postList).then(res => {
files= res.map(elem => {
if (elem.statusCode == 200) {
return elem.file;
}
});
console.log(filse)
}).catch(err => {
console.log(err);
});