微信小程序文件直接上传阿里云OSS-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序文件直接上传阿里云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做展示，原生微信小程序也可使用文章来源地址https://www.toymoban.com/news/detail-507824.html

				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' }
						})
					}
				})

到了这里，关于微信小程序文件直接上传阿里云OSS的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！