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

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

Logo

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

更多推荐