uni-app 上传图片到阿里云oss

丁经略
2023-12-01

// 在自己的文件中引入配置主文件地址
import OSSUtil from '@/commont/libs/ossUtil.js'

上传事件处理逻辑

// 上传图片处理逻辑
async uploadImage(){
	const that = this
				
	let files = await OSSUtil.getImage(); // 选择图片
	let sign = await OSSUtil.get_STS() // 获取签名等信息
	let imageSrc = files.tempFilePaths[0]; // 图片上传微信平台返回的是数组
	let fileName = OSSUtil.getVideoName('faxingVideo', imageSrc); // 第一个参数为自己设置的oss文件目录地址 第二个参数为文件目录地址
			
	// uploadTask   此处返回所有上传信息,方便后面获取上传进度
	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) => {
			if (res.statusCode != 200) {
				uni.showToast({
					title: '上传失败',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			uni.showToast({
			    title: '上传成功',
				icon: 'success',
				duration: 2000
			});
			that.imageUrl  = sign.host+"/"+fileName
		},
		fail: (err) => {
			uni.showModal({
				content: err.errMsg,
				showCancel: false
			});
       }
	});
	// 实时获取上传进度,图片文件太小,进度可能不是很明显
	uploadTask.onProgressUpdate((res) => {
		console.log("上传进度" + res.progress);
		this.imageProgress = res.progress;
	});
}

demo中进度条地址

其他计算代码通过压缩在demo中commot/libs目录下

config.js文件中的配置填入自己的即可

var fileHost = "" // oss基础地址,自己设置  如:'https://baidu.com'
var config = {
    //aliyun OSS config
    uploadImageUrl: `${fileHost}`, // 默认存在根目录,可根据需求改
    AccessKeySecret: '', // OSS中accessKeySecret
    OSSAccessKeyId: '',   // OSS中accessKeyId
    timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

此处为部分逻辑代码,详细代码可进入查看demo,demo属于自己简单整理,有同学需要可直接使用,有不当之处欢迎评论区指正

本文主要参考博客:uniapp上传视频图片到阿里云oss

 类似资料: