uniapp使用阿里OSS上传

此上传方法并不困难,纯纪录用

1.配置Bucket跨域访问(js上传都需要配置)
  1. 登录OSS管理控制台。
  2. 单击设置。
  3. 单击创建规则,配置如下图所示。
  4. 在这里插入图片描述

如是小程序,则需要配置小程序的上传域名白名单,具体可以看这篇文章《小程序配置域名白名单

2.使用Web端直传实践方案Demo进行上传测试
  • 下载应用服务器代码
  • 将文件解压,并打开upload.js文件
  • 修改upload.js中的配置信息。
    修改配置信息
  • accessId : 设置你的AccessKeyId。
  • accessKey : 设置你的AessKeySecret。
  • host: 格式为bucketname.endpoint,例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍,请参见Endpoint访问域名
  • expiration:设置Policy的失效时间,如果超过失效时间,就无法通过此Policy上传文件。
3.进行上传测试
  1. 在浏览器打开index.html文件
    index.html
  2. 单击选择文件,选择指定类型的文件,单击开始上传。
4.获取上传需要的签名(signature)和加密策略(policy)。

按F12开启web调试,在请求中的Form Data中获取signature和policy。
获取signature和policy

5.使用uniapp上传图片

使用chooseImageApi选择本地图片后上传

uni.chooseImage({
				count: 1, //默认9
				sizeType: ['compressed'],
				sourceType: ['album'],
				success: res => {
					let tiemr = new Date();
					let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr.getDate();
					address = 'zskp/userHead/' + address + '/';
					var imageSrc = res.tempFilePaths[0];
					let str = res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.'));
					let nameStr = address + tiemr.getTime() + str;
					let ossUrl = 'http://xxx.xxxxxxxxxxxxxxxxxxxxxx.xxx/';
					uni.uploadFile({
						url: ossUrl,//输入你的bucketname.endpoint
						filePath: imageSrc,
						fileType: 'image',
						name: 'file',
						formData: {
							name: nameStr,
							key: nameStr,
							policy: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你获取的的policy
							OSSAccessKeyId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', // 输入你的AccessKeyId
							success_action_status: '200', // 让服务端返回200,不然,默认会返回204
							signature: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx' // 输入你获取的的signature
						},
						success: res => {
							if(res.statusCode == '200'){
								consonle.log(ossUrl + nameStr);
							}else{
								consonle.log(res);
							}
						}
					});
				}
			});

上传成功的状态码为200时,则上传成功,如果未成功,请检查对应bucket是否设置跨域,已及AccessKeyId和签名(signature)和加密策略(policy)是否填写正确。

END

  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值