阿里云文檔示例：微信小程序直傳實踐 - 對象存儲 OSS - 阿里云

因為在客戶端進行直傳，此種做法并不推薦，相當于把oss的ossAccessKey，secret等信息放在了前端，并不安全，因此為了數據安全，建議使用簽名方式上傳文件。

這里采用了服務端簽名的做法，所以我們上傳oss的簽名來自于后端的接口

先封裝一個方法，此方法就作用于，請求后端接口，后端返回給我們一些簽名數據之類的

/* 1. 獲取阿里云信息，不建議前端直接獲取，這樣會把accessKey等等私密信息暴露到前端，建議采用 前端請求后端，而后端對oss進行一系列的加密等操作 將信息返回給前端*/ async function getAliOssInfo() {let [err, res] = await uni.request({url: 'https://www.example.com/api/oss/info'});return res }

再封裝一個方法

export async function uploadOss({filePath }) {let resp = await getAliOssInfo() //請求后臺獲取oss信息//直接獲取code可能不太對。。。可能外面還有一層if (resp.code === 200) {let {data} = resp //根據后臺返回的值而取let fileType = filePath.substring(filePath.lastIndexOf('.')) || '.jpg' //獲取圖片類型后綴 .jpg .png// 正常的情況下，我們上傳到oss都需要對文件進行重新命名以便我們進行更加合理的管理方式，// 比如 項目名稱/模塊名稱/年/月/日/隨意的字符串.圖片格式 ，這里我就只獲取圖片格式了，let key = `test123${fileType}` //那么我們上傳到oss上，路徑就是 test123.png || test123.jpg ...let [err, result] = await uni.uploadFile({url: data.host, //阿里云的存儲地址，可以后端返回給你，也可以前端自己寫上filePath, //要上傳的臨時文件路徑name: 'file',formData: {key, //文件名policy: data.policy, //后臺獲取超時時間OSSAccessKeyId: data.accessid, //后臺獲取臨時IDsuccess_action_status: '200', //讓服務端返回200,不然，默認會返回204signature: data.signature //后臺獲取簽名}})if (err) {// 上傳錯誤了。。。可以做點什么} else {return key //上傳成功后，將我們所自定義的key（文件路徑名）返回出去}} }

調用，result就是我們的上傳到阿里云oss后路徑了，當然此路徑是我們自定義的，即上方的key值。

async click() {uni.chooseImage({count: 1,success: async res => {let result = await uploadOss(res.tempFilePaths[0]);}});}

在寫uniapp項目的時候，我不太喜歡用原生自帶的uni.request進行請求，大部分都會選擇一個請求庫，或者自己做點簡單的封裝，這邊我比較推薦的是luch大神的luch-request請求庫：

插件地址：luch-request - DCloud 插件市場

官網地址：luch-request

同時luch-request，也是我所維護的uview2的請求庫，uview2對此進行了簡單的封裝，還真的挺好用的，我也附上一份luch-request的oss請求代碼，多少修修改改就可以了

import http from "../http.js"; //引入luch-request封裝的請求攔截，響應攔截 /* 1. 獲取阿里云信息，不建議前端直接獲取，這樣會把accessKey等等私密信息暴露到前端，建議采用 前端請求后端，而后端對oss進行一系列的加密等操作 將信息返回給前端*/ function getAliOssInfo() {return http.post('/api/oss/info') //接口由后臺提供 } /* 2. 圖片上傳到oss*/ export async function uploadOss({filePath }) {let resp = await getAliOssInfo() //請求后臺獲取oss信息if (resp.code === 200) {let {data} = resp //根據后臺返回的值而取let fileType = filePath.substring(filePath.lastIndexOf('.')) || '.jpg' //獲取圖片類型后綴 .jpg .png// 正常的情況下，我們上傳到oss都需要對文件進行重新命名以便我們進行更加合理的管理方式，// 比如 項目名稱/模塊名稱/年/月/日/隨意的字符串.圖片格式 ，這里我就只獲取圖片格式了，let key = `test123${fileType}` //那么我們上傳到oss上，路徑就是 test123.png || test123.jpg ...let result = await http.upload(data.host, {filePath,formData: {key, //文件名policy: data.policy, //后臺獲取超時時間OSSAccessKeyId: data.accessid, //后臺獲取臨時IDsuccess_action_status: '200', //讓服務端返回200,不然，默認會返回204signature: data.signature //后臺獲取簽名}})console.log(result)return key //上傳成功后，將我們所自定義的key（文件路徑名）返回出去} }

總結

以上是生活随笔為你收集整理的uniapp：上传图片文件到阿里云oss的全部內容，希望文章能夠幫你解決所遇到的問題。

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