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

程式碼封裝是在上文新增的。

本文知識點：

1、微信小程式選擇圖片wx.chooseImage()介面的使用

2、微信小程式選擇視訊wx.chooseVideo()介面的使用

3、微信小程式上傳檔案介面wx.uploadFile()的使用

4、nodejs上傳檔案multer模組的使用

效果

小程式程式碼

  /**
 * 從本地相簿選擇圖片或使用相機拍照。
 * @param {number} count 最多可選圖片的數量
 * @param {array} sizeType original 原圖，compressed 壓縮圖
 * @param {array} sourceType album 從相簿選圖，camera 使用相機
 */
  static chooseImage(count = 1, sizeType = ['compressed'], sourceType = ['album', 'camera']) {
    return new Promise((resolve, reject) => wx.chooseImage({ count, sizeType, sourceType, success: resolve, fail: reject }));
  }
  /**
   * 拍攝視訊或從手機相簿中選視訊，返回視訊的臨時檔案路徑。
   * @param {boolean} compressed 是否壓縮
   * @param {array} sourceType album 從相簿選圖，camera 使用相機
   * @param {number} maxDuration 拍攝視訊最長拍攝時間，單位秒。最長支援 60 秒
   */
  static chooseVideo(compressed = true, sourceType = ['album', 'camera'], maxDuration = 60) {
    return new Promise((resolve, reject) => wx.chooseVideo({ sourceType, compressed, maxDuration, success: resolve, fail: reject }));
  }

  /**
 * 將本地資源上傳到開發者伺服器，客戶端發起一個 HTTPS POST 請求
 * @param {string} url 開發者伺服器 url
 * @param {string} filePath 要上傳檔案資源的路徑
 * @param {string} name 
 * @param {object} formData HTTP 請求中其他額外的 form data
 */
  static uploadFile(url, filePath, name, formData = { openid: "test" }) {
    return new Promise((resolve, reject) => {
      let opts = { url, filePath, name, formData, header: { 'Content-Type': "multipart/form-data" }, success: resolve, fail: reject };
      wx.uploadFile(opts);
    });
  }
 

let app = getApp();
let wechat = require("../../utils/wechat");
Page({
  data: {
    tempImagePath: "", // 拍照的臨時圖片地址
    tempThumbPath: "", // 錄製視訊的臨時縮圖地址
    tempVideoPath: "", // 錄製視訊的臨時視訊地址
    type: "chooseImage",
  },
  onLoad() {
  },
  camera(e) {
    let { type } = e.target.dataset;
    this.setData({
      type
    })
    console.log("開始上傳準備", type == "chooseImage" ? "圖片" : "視訊");
    // 拍照
    if (type == "chooseImage") {
      console.log("選擇圖片");
      wechat.chooseImage()
        .then(d => {
          let { path, size } = d.tempFiles[0];
          this.setData({
            tempImagePath: path,
          });
          return wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", path, "uploadImg")
        })
        .then(d => {
          console.log(d);
        })
        .catch(e => {
          console.log(e);
        })
    }
    // 錄視訊
    else if (type == "chooseVideo") {
      wechat.chooseVideo()
        .then(d => {
          console.log(d);
          let { tempFilePath, thumbTempFilePath, size } = d;
          this.setData({
            // tempThumbPath: thumbTempFilePath,
            tempVideoPath: tempFilePath,
          });
          return wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", tempFilePath, "tempVideoPath");
        })
        .then(d => {
          console.log(d);
        })
        .catch(e => {
          console.log(e);
        })
    }
  }
})
 

<view class="view">
  <view class="window">
    <image class="cover-9" src="{{tempImagePath}}" bindtap="img" wx:if="{{type=='chooseImage'}}"></image>
    <video class="cover-9" src="{{tempVideoPath}}" poster="{{tempThumbPath}}" wx:if="{{type=='chooseVideo'}}"></video>
    <view class="window-2">
      <button bindtap="camera" type="primary" data-type="chooseImage">圖片</button>
      <button bindtap="camera" type="primary" data-type="chooseVideo">視訊</button>
    </view>
  </view>
</view>

page{
  height: 100%;
}
.view{
  width: 100%;
  height: 100%;
}
.window{
  width: 100%;
  height: 100%;
}
.window-2{
  display: flex;
  flex-direction: row;
}
.cover-9{
  width: 728rpx;
  height: 80%;
  margin: 0 10rpx;
  border:2rpx solid;
  border-radius:5px;  
}
button{
  margin: 0 10rpx;
  width: 100%;
}

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}` });  
  });  
}) 

後端列印

上傳的檔案