uniapp上传图片文件到阿里云OSS经验总结

阳光穿透心脏的1/2处 2022-11-18 01:51 881阅读 0赞

## 1.配置Bucket跨域(一般是后端干，嘿嘿) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]  
[了解一下后端的 配置流程][Link 1]

服务器端做签名，前端携带签名直接将图片等资源上传OSS  
优点：安全、高效、优雅、与现有服务器不冲突无影响，业务无限发展也毫不担心OSS性能问题。  
**核心3步骤：**  
1、开通阿里云OSS服务 做好相关配置 拿到相关签名数据  
2、后台服务端创建签名接口  
3、前端选择图片、获取签名、上传OSS

> 但小程序端，前端需要配置上传域名白名单《[小程序配置域名白名单][Link 2]》

## 2.实践方案Demo进行上传测试 ##

*  [下载应用服务器代码][Link 3]
 *  将文件解压，并打开upload.js文件
 *  修改upload.js中的配置信息。
 *  accessId ： 设置你的AccessKeyId。
 *  accessKey ： 设置你的AessKeySecret。
 *  host：格式为bucketname.endpoint，例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍，[请参见Endpoint访问域名][Endpoint]。
 *  expiration：设置Policy的失效时间，如果超过失效时间，就无法通过此Policy上传文件

## 3.进行上传测试 ##

## 4.获取上传需要的签名（signature）和加密策略（policy） ##

## 5.使用uniapp上传文件 ##

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）是否填写正确。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70]: /images/20221022/6d3d82e10052444786f463d9f4eb8aec.png
[Link 1]: https://blog.csdn.net/qq_39341192/article/details/89708356
[Link 2]: https://blog.csdn.net/weixin_44606457/article/details/105227254
[Link 3]: https://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/internal/oss/0.0.4/assets/sample/oss-h5-upload-js-direct.zip?spm=a2c4g.11186623.2.21.369658abm1EgFv&file=oss-h5-upload-js-direct.zip
[Endpoint]: https://help.aliyun.com/document_detail/31827.html?spm=a2c4g.11186623.2.23.369658abm1EgFv#section-t3j-nmt-tdb