node.js服務端處理檔案上傳的完整流程
阿新 • • 發佈:2018-11-24
在本文 微信小程式-從相簿獲取圖片 使用相機拍照 本地圖片上傳之前需要看看
微信小程式-獲取使用者session_key,openid,unionid - 後端為nodejs
程式碼封裝是在上文新增的。
本文知識點:
1、微信小程式選擇圖片wx.chooseImage()介面的使用
2、微信小程式選擇視訊wx.chooseVideo()介面的使用
3、微信小程式上傳檔案介面wx.uploadFile()的使用
4、nodejs上傳檔案multer模組的使用
效果
注意:
1、在微信開發工具裡選擇視訊介面wx.chooseVideo()返回的資料有視訊縮圖欄位(thumbTempFilePath),在真機上沒有;
2、上傳視訊時,compressed壓縮欄位無效,不知是所有手機無效還是部分,本文測試時,使用的是華為mate9,這也是小程式的深坑之一;
3、上傳視訊時,使用錄製方式,華為mate9視訊大小過大,錄製的6秒鐘視訊就有20多M,網上說好像mate9的視訊編碼格式是h265,普通手機為h264,也許是無法壓縮問題引起的;
所以嘗試了另外一種方式錄製,使用camera元件,這種方式需要自己自定義錄製介面:點選這裡。
微信小程式程式碼:
openAlbum : function(){ let self = this; wx.chooseImage({ success: function(res) { let tempFiles = res.tempFiles; self.setData({ imgList : tempFiles[0].path }) console.log("tempFiles is ",tempFiles); wx.uploadFile({ url: 'http://localhost:8000/uploadImage', filePath: tempFiles[0].path, header : { 'content-type':'multipart/form-data' }, name: 'file', }); }, }) },
nodejs 服務端程式碼
const multer = require('multer'); let path = require("path"); //上傳檔案配置 const storage = multer.diskStorage({ //檔案儲存位置 destination: (req, file, cb) => { cb(null, path.resolve(__dirname, '../uploads/tmp/')); }, //檔名 filename: (req, file, cb) => { cb(null, `${Date.now()}_${Math.ceil(Math.random() * 1000)}_multer.${file.originalname.split('.').pop()}`); } }); const uploadCfg = { storage: storage, limits: { //上傳檔案的大小限制,單位bytes fileSize: 1024 * 1024 * 20 } }; router.post("/api/upload", async (req, res) => { let upload = multer(uploadCfg).any(); upload(req, res, async (err) => { if (err) { res.json({ path: `//uploads/tmp/${uploadFile.filename}` }); console.log(err); return; }; console.log(req.files); let uploadFile = req.files[0]; res.json({ path: `//uploads/tmp/${uploadFile.filename}` }); }); })
原文:https://blog.csdn.net/zzwwjjdj1/article/details/79376400