1. 程式人生 > >node.js服務端處理檔案上傳的完整流程

node.js服務端處理檔案上傳的完整流程

在本文 微信小程式-從相簿獲取圖片 使用相機拍照 本地圖片上傳之前需要看看

微信小程式-獲取使用者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