第一步 配置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' }})}})

總結

以上是生活随笔為你收集整理的微信小程序文件直接上传阿里云OSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。