在本文 微信小程序-从相册获取图片 使用相机拍照 本地图片上传之前需要看看

微信小程序-获取用户session_key,openid,unionid - 后端为nodejs

代码封装是在上文添加的。

本文知识点：

1、微信小程序选择图片wx.chooseImage()接口的使用

2、微信小程序选择视频wx.chooseVideo()接口的使用

3、微信小程序上传文件接口wx.uploadFile()的使用

4、nodejs上传文件multer模块的使用

效果

image

注意：

1、在微信开发工具里选择视频接口wx.chooseVideo()返回的数据有视频缩略图字段(thumbTempFilePath)，在真机上没有；

2、上传视频时，compressed压缩字段无效，不知是所有手机无效还是部分，本文测试时，使用的是华为mate9，这也是小程序的深坑之一；

3、上传视频时，使用录制方式，华为mate9视频大小过大，录制的6秒钟视频就有20多M，网上说好像mate9的视频编码格式是h265，普通手机为h264，也许是无法压缩问题引起的；

image

所以尝试了另外一种方式录制，使用camera组件，这种方式需要自己自定义录制界面：点击这里。

小程序代码

在utils下的wechat.js文件里添加代码，如有则忽略

  /** 
  * 从本地相册选择图片或使用相机拍照。 
  * @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);  
  });  
  }  

js

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

html

  <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>  

css

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

后端打印

image

上传的文件

image