uni-app 使用阿里oss上传图片

其他相关JS文件在底部

import Crypto from './crypto.js';
import './hmac.js';
import './sha1.js';
import { Base64 } from './base64.js';

const uploadFileSize = 1024 * 1024 * 100; // 上传文件的大小限制100m
const accesskey = "key"
const accessId = "id"
const ossDomain = 'http://xxx.oss-cn-beijing.aliyuncs.com/'

export default {
	_getPolicy() {
		let policyText = {
			"expiration": "2099-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
			"conditions": [
				["content-length-range", 0, uploadFileSize] // 设置上传文件的大小限制
			]
		};

		return Base64.encode(JSON.stringify(policyText))
	},
	_getSignature(message) {
		let bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
			asBytes: true
		});
		return Crypto.util.bytesToBase64(bytes);
	},
	_getSuffix(filename) {
		let pos = filename.lastIndexOf('.')
		let suffix = ''
		if (pos != -1) {
			suffix = filename.substring(pos)
		}
		return suffix;
	},
	getFileName(filename) {
		return 'jdwy_img/' + new Date().getTime() + Math.random().toString(36).substring(3, 20) + this._getSuffix(
			filename)
	},
	getImage() {
		return new Promise((resolve, reject) => {
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'],
				success: (res) => {
					resolve(res)
				}
			})
		});
	},
	getVideo() {
		return new Promise((resolve, reject) => {
			uni.chooseVideo({
				count: 1,
				sourceType: ['camera', 'album'],
				success: function(res) {
					if (res.size > uploadFileSize) {
						uni.showToast({
							title: '文件大小超过系统上传限制：' + uploadFileSize,
							icon: 'none',
							duration: 1000
						});
						return;
					}
					resolve(res.tempFilePath)
				},
				fail: () => {
					uni.showToast({
						title: '取消选择视频',
						icon: 'none',
						duration: 2000
					});
				}
			})
		});
	},
	// 获取STS签名
	get_STS() {
		// 本地获取
		return new Promise((resolve, reject) => {
			let policy = this._getPolicy();
			let res = {
				accessId: accessId,
				host: ossDomain,
				policy,
				signature: this._getSignature(policy),
			};
			resolve(res)
		})
	},
};

在组件中使用

import oss from '@/common/oss/index.js'
async checkPermission(code) {
	let type = code ? code - 1 : this.sourceTypeIndex;
	let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
		await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
			'android.permission.READ_EXTERNAL_STORAGE');
	
	if (status === null || status === 1) {
		status = 1;
	} else {
		uni.showModal({
			content: "没有开启权限",
			confirmText: "设置",
			success: function(res) {
				if (res.confirm) {
					permision.gotoAppSetting();
				}
			}
		})
	}
	return status;
},
async chooseImage() {
	// 如果是app端需要先进行授权
	// #ifdef APP-PLUS
	// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
	let status = await this.checkPermission(); //参考uni-app 官方示例，因为我也是按照官方文档来的，它的兼容性是最好的
	if (status !== 1) {
		return;
	}
	// #endif
	let files = await oss.getImage(); // 选择图片
	let sign = await oss.get_STS() // 获取签名等信息
	let imageSrc = files.tempFilePaths[0];
	let fileName = oss.getFileName(imageSrc); // 自定义上传后的文件名称
	
	let uploadTask = uni.uploadFile({
		url: sign.host,
		filePath: imageSrc,
		fileType: 'image',
		name: 'file',
		formData: {
			name: imageSrc,
			'key': fileName,
			'policy': sign.policy,
			'OSSAccessKeyId': sign.accessId,
			'success_action_status': '200',
			//让服务端返回200,不然，默认会返回204
			'signature': sign.signature,
		},
		success: (res) => {
			console.log('uploadImage success, res is:', res)
			if(res.statusCode === 200){
				this.form.code_pic = sign.host + fileName;
				this.tips = "重新上传支付宝收款二维码"
				console.log(sign.host + fileName)
				uni.showToast({
					title: '上传成功',
					icon: 'none',
				});
				return;
			}
		},
		fail: (err) => {
			console.log("err: ", err);
			// #ifdef APP-PLUS
			if (err['code'] && err.code !== 0) {
				this.checkPermission(err.code);
			}
			// #endif
			// #ifdef MP
			if (err.errMsg.indexOf('cancel') !== '-1') {
				return;
			}
			uni.getSetting({
				success: (res) => {
					let authStatus = false;
					authStatus = res.authSetting['scope.album'] && res.authSetting[
						'scope.camera'];
					if (!authStatus) {
						uni.showModal({
							title: '授权失败',
							content: '需要从您的相机或相册获取图片，请在设置界面打开相关权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting()
								}
							}
						})
					}
				}
			})
			// #endif
		},
	});
	uploadTask.onProgressUpdate((res) => {
		console.log("上传进度" + res.progress);
		this.progress = res.progress;
	});

}

下载地址 ： 阿里oss上传相关文件