微信小程式開發 -- 通過雲函式下載任意檔案
阿新 • • 發佈：2020-05-28
#### 微信小程式開發 -- 通過雲函式下載任意檔案
> 1.雲開發介紹
微信小程式開發者眾所周知，小程式開發擁有許多限制，當我還是一個菜鳥入門的時候，第一關就卡在了沒有備案域名的HTTP請求上面，那時候雲開發上線也沒多久，使用的人也不是很多，我抱著嘗試的態度去接觸了雲開發，發現了雲開發的妙處。（自由）
**blog：**[微信小程式HTTP訪問連結解決方案](https://www.cnblogs.com/masterchd/p/9895636.html)
> 2.小程式檔案下載限制
微信小程式除了對訪問地址有限制之外，對於檔案下載，也存在的限制，如下圖所示，只有資源伺服器A，在downloadFile域名白名單內且配置了SSL訪問，即HTTPS才可以正常的下載資源。（閒的蛋疼，飽受詬病）
> 3.雲函式下載任意檔案設計
依然秉持著對雲開發的信任，嘗試使用雲函式進行任意檔案下載，設計思路如下圖所示。
上圖描述的兩種通過雲函式下載檔案的方式
1. 雲函式只作為一個數據中轉節點，請求資源轉化為Buffer直接返回給小程式端。
2. 雲函式作為儲存器，下載資源儲存到雲空間，並返回給小程式端fileID(置換下載地址)。
> 4.雲函式實現方式
通過請求頭配置實現請求資原始檔返回Buffer。
~~~javascript
const cloud = require('wx-server-sdk')
const request = require('request')
const fs = require('fs')
const path = require('path')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database(); //初始化雲資料庫
exports.main = async (event, context) => {
var url = event.url; //下載地址,應該由前端進行傳遞,而後雲函式進行下載
var type = event.type; //type:'dump'(轉儲) 'trans'(傳遞)
var filename = event.filename;
//檔名稱需要自己進行上傳,或者substring 擷取url
var options = {
url: url,
encoding: null,
headers: {
"content-type": "application/octet-stream",
},
};
return new Promise(function (resolve, reject) {
request(options, function (error, response, body) {
if(type=='trans'){
//中繼
resolve(body)
}else{
//轉儲
resolve(
cloud.uploadFile({
cloudPath: 'tmp/'+filename,
fileContent: body,
})
)
}
})
})
}
~~~
> 5.中繼下載方式（不推薦，適合小檔案）
如果檔案達到一定體積，會出現如下問題：
中繼下載方式對檔案的大小有限制，這是由於雲函式返回限制決定的，很容易超出。但是對於一些幾kb的檔案，推薦使用這種方式，減少了轉儲所需要耗費的時間。
中繼方式下載資源寫法如下：
~~~javascript
var _filename = '美景.jpg';
var _url = 'http://img.apisev.cn:8081/wechat/sk1.jpg';
wx.cloud.callFunction({
name:'transfile',
data:{
url:_url,
filename:_filename,
type:'trans'
},
success(res){
console.log(res)
const FileSystemManager = wx.getFileSystemManager();
FileSystemManager.writeFile({
filePath:wx.env.USER_DATA_PATH+"/"+_filename,
data:res.result,
encoding: 'binary',//編碼方式，二進位制
success(tres){
console.log(tres)
//可以根據filePath 開啟檔案，此處以為圖片舉例
var _filepath = wx.env.USER_DATA_PATH+"/"+_filename;
wx.previewImage({
urls: [_filepath],
})
},fail(tres){
console.log(tres)
}
})
},fail(res){
console.log(res)
}
})
~~~
真機執行，可以成功預覽資源圖片。
> 6.轉儲下載方式（推薦）
首先在網際網路資源隨便找了一個圖片資源地址，呼叫雲函式。
~~~javascript
var _filename = '美景.jpg';
var _url = 'https://n.sinaimg.cn/sinacn20106/212/w2048h1364/20190828/cded-icuacsa3953451.jpg';
wx.cloud.callFunction({
name:'transfile',
data:{
url:_url,
filename:_filename,
type:'dump'
},
success(res){
console.log(res)
},fail(res){
console.log(res)
}
})
~~~
返回內容如下：
圖片成功被轉存到雲端儲存空間。
>7.參考文件
[[1] FileSystemManager.writeFile(Object object)](https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.writeFile.html)
> 8.作者QQ(開發需求)
QQ： [1025584691](tencent://message/?uin=1025584691&Site=http://www.xxx.com&Me