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

浅浅的花香味﹌ 2022-11-02 13:27 1103阅读 0赞

### uni-app 上传本地图片或视频到阿里云oss，带中间圆形进度条 ###

前端控制文件直接将本地图片或视频上传到阿里云oss中，不用走后台接口即可上传

// 在自己的文件中引入配置主文件地址
    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中[进度条地址][Link 1]

其他计算代码通过压缩在demo中[commot/libs][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][uniapp_oss]

[Link 1]: https://ext.dcloud.net.cn/plugin?id=259
[commot_libs]: https://gitee.com/sxzhsu/alloss-upload/tree/master/commont/libs
[demo]: https://gitee.com/sxzhsu/alloss-upload
[uniapp_oss]: https://gitee.com/kcqingfeng/uniUploadVideo