首先从后端拿到上传的 key这些
data:{
	"accessid": "LTAI***************************VY2",
	"policy": "eyJleHBpcmF0a***************************cGljLzIwMjIwNyJdXX0=",
	"signature": "/tDA2Q***************************Y=",
	"dir": "app/***************************/",
	"host": "https://***************************iyuncs.com",
	"expire": "1657874405",
	"fileRemoteName": "zc-3c***************************b6da7a9b",
	"fileNativeName": "202***************************da7a9b",
	"platformUrl": "http:***************************x.cn/"
}



 //先选择图片
 uni.chooseImage({
	count: 1, //默认9
	sizeType: ['compressed'],
	sourceType: ['album'],
	success: res => {
		this.demo(res.tempFilePaths[0],data)  //转去上传图片  uniapp 在app里面是可以传多张图一起上传的 其他的只能写个循环一张一张传
	}
});


demo(e,data){  //上传图片
//这里这个data 就是你从后端拿到的key

	let uploadTask = uni.uploadFile({
		url:'https://oss-onexbox-mini.oss-cn-hangzhou.aliyuncs.com', //如:https://testbucketname.oss-cn-huhehaote.aliyuncs.com
		filePath: e, //choostimage 返回的临时图片路径
		fileType: 'image',
		name: 'file',
		formData: { //下面的属性名称 大小写无所谓 都能通过
			'Key': data.dir+e, //OSS存储路径/图片名称 => 如:task/test.jpg 别写成 /test.jpg 会有问题(这里不拼接就是会报403)
			'Policy': data.policy, //后端Base64编码格式的授权策略 用于签名
			'OSSAccessKeyId': data.accessid, //OSS控制台获取
			'Success_Action_Status': '200', //让服务端返回200,不然,成功上传图片后阿里默认返回statusCode: 204
			'Signature': data.signature, //服务端返回的签名内容
		},
		success: (res) => {
			console.log('uploadImage success, res is:', res)
			uni.showToast({
				title: '上传成功',
				icon: 'success',
				duration: 1000
			});						
		},
		fail: (err) => {
			console.log('uploadImage fail', err);
			throw new Error(err.errMsg);
		}
	});

参考文档 https://blog.csdn.net/liuyonghong159632/article/details/108217851?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-1-108217851-blog-120077034.pc_relevant_multi_platform_whitelistv1_exp2&spm=1001.2101.3001.4242.2&utm_relevant_index=3

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐