uni-app实现阿里OSS直传

uni-app实现阿里OSS直传

我已上传到uniapp的插件市场: 插件地址

需下载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);
});

---

总结

原创不易，转载请注明出处！！！如果本文对你有所帮助，给个点赞、收藏再走吧。