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

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

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

前言

（一）開通OSS服務(wù)與新建Bucket

開通OSS服務(wù)這里省略，新建bucket。

（二）設(shè)置Bucket屬性，后臺配置域名

上傳文件訪問域名

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

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

（三）服務(wù)端簽名直傳

點擊查看文檔

這里就不多做介紹了，這是上傳文件到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上傳文件，所以沒有必要每次上傳都去服務(wù)端獲取簽名。

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的原因是：在很多場景下，一個應(yīng)用對應(yīng)一個Bucket，為了防止數(shù)字覆蓋，每個用戶上傳到OSS的文件都可以有特定的前綴。這樣就存在一個問題，用戶獲取到這個Policy后，在失效期內(nèi)都能修改上傳前綴，從而上傳到別人的目錄下。為了解決這個問題，可以設(shè)置應(yīng)用服務(wù)器在上傳時就指定用戶上傳的文件必須是某個前綴。這樣如果用戶獲取到了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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: