// 在自己的文件中引入配置主文件地址
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