微信小程序文件直接上传阿里云OSS

第一步 配置Bucket跨域访问

第二步 微信小程序配置域名白名单

以上两步，请参考阿里云官网，如何在微信小程序环境下将文件上传到OSS_对象存储 OSS-阿里云https://help.aliyun.com/document_detail/92883.html

安装依赖 wx-oss-upload

npm install wx-oss-upload --save

然后创建自己的上传方法，引用 wx-oss-upload

import OssUpload from 'wx-oss-upload' // 上传插件
import {
	getSts
} from '@/api/system.js' // 后台获取签名方法

/**
 * @description 参数以对象形式传入
 * @param {String} host 存储空间访问域名 必填
 * @param {String} bucketType 桶存储类型
 * @param {String} folder 文件存放位置路径，例如 /xx/xx/
 * @param {String} filePath 本地上传文件路径 必填
 * @param {String} fileName 本地上传文件名称
 */
export async function uploadFile(data) {

	const params = await getSts(data.bucketType)

	const {
		accessKeyId,
		accessKeySecret,
		securityToken,
		expiration
	} = params.credential;

	const ossUpload = new OssUpload({
		accessKeyId,
		accessKeySecret,
		expirationTime: expiration 
	})

	return await ossUpload.uploadFile({
		host: data.host,
		folder: data.folder,
		filePath: data.filePath,
		fileName: data.fileName,
		securityToken
	})
}

 然后在选取文件后，调用自定义上传方法即可,此处采用uniapp API做展示，原生微信小程序也可使用

				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera']
				}).then(async ([err, res]) => {
					if (res) {
						uni.showLoading({
							mask: true,
							title: '打卡上传中...'
						})
						uploadFile({
							host: '', // 阿里云地址
							folder: '', // 阿里云存放文件夹
							filePath: res.tempFilePaths[0],
						}).then(res => {
							console.log(res); // 输出结果 { url: 'xxx' }
						})
					}
				})