uniapp+node.js 开发小程序上传图片到阿里云OSS

1. 效果图：

 经过测试在小程序端，H5端都能正常运行。

2. 后端node.js代码

后端代码主要负责签名服务，把签名返回给前端直接上传图片到阿里云OSS 。

官方说明文档 ： 微信小程序直传实践

完整代码：

// 阿里云OSS官方文档 https://help.aliyun.com/document_detail/92883.html
// 步骤3：获取签名 -- 服务端签名

// 导入模块
const express = require("express");
const app = express();
const MpUploadOssHelper = require("./js/uploadOssHelper.js");
const OSS = require('ali-oss');

// 设置跨域访问
app.all("*",function(req,res,next){    
    res.header("Access-Control-Allow-Origin","*");  //设置允许跨域的域名，*代表允许任意域名跨域    
    res.header("Access-Control-Allow-Headers","content-type");  //允许的header类型    
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");  //跨域允许的请求方式 
    if (req.method.toLowerCase() == 'options'){
		res.send(200);  //让options尝试请求快速结束
	}else{
		next();
	}        
})

// 声明常量，在阿里云控制台找 https://ram.console.aliyun.com/users
const OSSaccessKeyId = 'xxxxxxxx';
const OSSaccessKeySecret = 'xxxxxxxxx';
const OSSregion = 'oss-cn-xxxxxxxx';
const OSSbucket = 'xxxxxxxx';

// 声明变量
var markerString = null;


/*签名服务*/
app.get("/getParams", (req, res) => {
	const mpHelper = new MpUploadOssHelper({
		// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
		accessKeyId: OSSaccessKeyId,
		accessKeySecret: OSSaccessKeySecret,
		// 限制参数的生效时间，单位为小时，默认值为1。
		timeout: 1,
		// 限制上传文件大小，单位为MB，默认值为10。
		maxSize: 10,
	});

	// 生成参数。
	const params = mpHelper.createUploadParams();
	console.log(params);
	res.json(params);
});


/*请求文件列表*/
app.get("/getList", (req, res) => {	
	const client = new OSS({
		// yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
		region: OSSregion,
		// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
		accessKeyId: OSSaccessKeyId,
		accessKeySecret: OSSaccessKeySecret,
		// yourbucketname填写存储空间名称。
		bucket: OSSbucket
	});	
	
	//分页列举文件
	async function list() {		
		const result = await client.list({
			"marker":markerString, //分页标记
			"max-keys": 16,   //设置按字母排序最多返回前16个文件。			
			"prefix": 'photo/'   //列举文件名中包含前缀photo/的文件。
		});
		
		markerString = result.nextMarker;
		console.log(result);
		
		//提取部分属性组合成新的对象
		let obj = {}
		obj.resList = result.objects  
		obj.nextMarker = result.nextMarker
		
		res.send(obj)	//发送给前端	
	}
	
	list();
});

app.listen(8000);
console.log('服务开启成功，访问地址为 http://127.0.0.1:8000');

3. 前端uniapp代码

主页源代码 index.vue  ，向后端请求签名，拿到签名后向阿里云OSS直传图片，文件不经过后端，上传速度不受后端服务器带宽影响。

// index.vue

查看图片页面源代码 imageView.vue  ，此处用的是瀑布流形式展示图片，向后端分页请求数据，提高前端页面图片加载速度。

// imageView.vue  
/* 源码下载地址：
链接：https://pan.baidu.com/s/1AVB71AjEX06wpc4wbcV_tQ?pwd=l9zp
提取码：l9zp */

4. 碰到的问题及解决方法

主要的问题是前端遇到阿里云返回403错误 。 

按官方的排查方法解决 ：访问OSS时出现403状态码的排查方法