uni-app小程序上传阿里云 对象存储 OSS（内含过程遇到的报错）

概述：

小程序登录  把用户头像保存 需要通过阿里云的对象存储OSS 

官方文档：

如何在微信小程序环境下将文件上传到OSS_对象存储(OSS)-阿里云帮助中心

让我们跟随步骤 开始！！！！

步骤：

1.小程序后台配置域名白名单

直接登录微信公众平台

2.获取签名

我们选择的是第二种，先让后端搭建一个STS服务，然后前端调接口获取STS临时授权账号并生成签名

关于  crypto-js 和  js-base64  我是直接用npm下载的 记得构建npm

npm i crypto-js
npm i js-base64

后边的就是无脑复制

这里就报错了 

通过我一步一步打印发现：这个signBytes是 crypto-js

我打印出来这个是 undefined 

所以我自己重新封装了一下

import crypto from "crypto-js";
import {
	Base64
} from "js-base64";
import baseUrl from '../api/config.js'
// 计算签名。
function computeSignature(accessKeySecret, canonicalString) {
	return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
}

export const getFormDataParams = async function() {
	
	var credentials = await uni.request({
		url: `${baseUrl}/sts/token`, //仅为示例，并非真实接口地址。
		header: {
			"Resp-Content-Type": "text/json", //返回json
		},
		method: 'get',
	});
	console.log(credentials)
	const policyText = {
		expiration: credentials.data.expiration, // 设置policy过期时间。
		conditions: [
			// 限制上传大小。
			["content-length-range", 0, 1024 * 1024 * 1024],
		],
	};
	const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
	
	const signature = crypto.enc.Base64.stringify(crypto.HmacSHA1(policy,credentials.data.accessKeySecret));
	const formData = {
		OSSAccessKeyId: credentials.data.accessKeyId,
		signature,
		policy,
		securityToken: credentials.data.securityToken
	}
	return formData
}

注意 宝宝们 接口返回的属性名和属性值一定要复制正确  

3.根据签名就可以调微信upLoad  Api了

直接上代码 一步都不能少

getFormDataParams().then(data => {
	        
					const host = '域名';
					const ossAccessKeyId = data.OSSAccessKeyId;
					const filePath1 = _that.filePath;
					const policy = data.policy;
					const key = `test/myphoto.png`;//路径名
					const signature = data.signature;
					const securityToken = data.securityToken;
					
					wx.uploadFile({
						url: host,
						filePath: filePath1,
						name: 'file', // 必须填file。
						formData: {
							key,
							policy,
							OSSAccessKeyId: ossAccessKeyId,
							signature,
							'x-oss-security-token': securityToken  //这个属性名必须要这么写
						},
						success: (res) => {
							console.log('上传成功', res);
							if (res.statusCode === 204) {

							}
						},
						fail: err => {
							console.log(err);
						}
					});
				});

关于字段说明：

对于微信头像名称  key字段 最好用用户唯一标识openId 来命名  后期用户与用户之间不会相互影响

总结：

其实就是按照文档来 哪里需要点哪里  不要太有自己的想法 不然就会报错  

这样就是成功了！！！！！