微信小程序上傳文件到阿里OSS教程

更新時間：2019年05月20日 08:38:28 作者：Ho0229

這篇文章主要為大家詳細介紹了微信小程序上傳文件到阿里OSS教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

（一）開通OSS服務與新建Bucket

開通OSS服務這里省略，新建bucket。

（二）設置Bucket屬性，后臺配置域名

上傳文件訪問域名

這里我們要在小程序后臺配置上傳域名（上面的域名是我自己的申請的，后臺配置的是公司的的域名，使用的時候你們用一套東西即可）。

下圖是bucket管理，這里可以新建文件的保存路徑，域名管理。

（三）服務端簽名直傳

點擊查看文檔

這里就不多做介紹了，這是上傳文件到oss需要的參數(shù)，這些數(shù)據(jù)可以從后臺獲取。

{
 "accessid": "6MKO******4AUk44",
 "host": "http://post-test.oss-cn-hangzhou.aliyuncs.com",
 "policy": "eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDoyMzoyM1oiLCJjxb25kaXRpb25zIjpbWyJjcb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8iXV19",
 "signature": "I2u5*******yff151E=",
 "expire": 1446726203,
 "dir": "user-dir/"
}

accessid：用戶請求的accessid。
host：用戶要往哪個域名發(fā)送上傳請求。
policy：用戶表單上傳的策略（Policy），是經(jīng)過base64編碼過的字符串。
signature：對變量policy簽名后的字符串。
expire：上傳策略失效時間，在PolicyText里指定。在失效時間之前，都可以利用此Policy上傳文件，所以沒有必要每次上傳都去服務端獲取簽名。

Policy的內(nèi)容：

{"expiration":"2015-11-05T20:23:23Z",
"conditions":[["content-length-range",0,1048576000],
["starts-with","$key","user-dir/"]]

Policy說明：

Policy中增加了starts-with，用來指定此次上傳的文件名必須以user-dir開頭，用戶可自行指定此字符串。增加starts-with的原因是：在很多場景下，一個應用對應一個Bucket，為了防止數(shù)字覆蓋，每個用戶上傳到OSS的文件都可以有特定的前綴。這樣就存在一個問題，用戶獲取到這個Policy后，在失效期內(nèi)都能修改上傳前綴，從而上傳到別人的目錄下。為了解決這個問題，可以設置應用服務器在上傳時就指定用戶上傳的文件必須是某個前綴。這樣如果用戶獲取到了Policy也沒有辦法上傳到別人的前綴上，從而保證了數(shù)據(jù)的安全性。

（四）微信小程序上傳

getCloudCdnParams: function(filePath, index) {
 var that = this;
 var dataUrl = app.globalData.laiSignBaseUrl + "open/getOSSClient"
 var params = new Object();
 params.type = app.globalData.imgesDir
 util.POST(
  dataUrl, {
  params,
  success: function(res) {
   if (res != null && res.data != null && res.data.success) {
   var result = res.data.result
   that.uploadFileFun(result, filePath, index)
   }
  },
  fail: function() {},
  })
 },

因為上傳文件有時效性，所以在每次上傳的時候都要重新獲取上傳的參數(shù)。

 // 上傳圖片
 uploadFileFun: function(result, filePath, index) {
 var that = this;
 wx.uploadFile({
  url: app.globalData.uploadFileBaseUrl,
  filePath: filePath,
  /**上傳的參數(shù)**/
  formData: {
  name: filePath,
  key: app.globalData.imgesDir + "demo-file" + result.expire + index,
  policy: result.policy,
  OSSAccessKeyId: result.accessid,
  success_action_status: "200",
  signature: result.signature,
  },
  success: function(res) {
   /**這邊上傳成功后要自己拼接文件的地址**/
   coverUrl: app.globalData.uploadFileBaseUrl + "/" + app.globalData.imgesDir + "demo-file" + result.expire + index
  },
  fail: function(res) {
  console.log(res)
  }
 })
 },

常見問題以及解決方法

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: