/*** 将本地资源上传到开发者服务器，客户端发起一个 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

//index.js
//获取应用实例
let app = getApp();
let wechat = require("../../utils/wechat");
Page({data: {device: true,tempImagePath: "", // 拍照的临时图片地址tempThumbPath: "", // 录制视频的临时缩略图地址tempVideoPath: "", // 录制视频的临时视频地址camera: false,ctx: {},type: "takePhoto",startRecord: false,time: 0,timeLoop: "",},onLoad() {this.setData({ctx: wx.createCameraContext()})},// 切换相机前后置摄像头devicePosition() {this.setData({device: !this.data.device,})console.log("当前相机摄像头为:", this.data.device ? "后置" : "前置");},camera() {let { ctx, type, startRecord } = this.data;// 拍照if (type == "takePhoto") {console.log("拍照");ctx.takePhoto({quality: "normal",success: (res) => {// console.log(res);this.setData({tempImagePath: res.tempImagePath,camera: false,});wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempImagePath, "upload").then(d => {console.log(d);}).catch(e => {console.log(e);})},fail: (e) => {console.log(e);}})}// 录视频else if (type == "startRecord") {if (!startRecord) {console.log("开始录视频");this.setData({startRecord: true});// 30秒倒计时let t1 = 0;let timeLoop = setInterval(() => {t1++;this.setData({time: t1,})// 最长录制30秒if (t1 == 30) {clearInterval(timeLoop);this.stopRecord(ctx);}}, 1000);this.setData({timeLoop})// 开始录制ctx.startRecord({success: (res) => {console.log(res);},fail: (e) => {console.log(e);}})}else {this.stopRecord(ctx);}}},// 停止录制stopRecord(ctx) {console.log("停止录视频");clearInterval(this.data.timeLoop);ctx.stopRecord({success: (res) => {this.setData({tempThumbPath: res.tempThumbPath,tempVideoPath: res.tempVideoPath,camera: false,startRecord: false,time: 0});wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempThumbPath, "tempThumbPath").then(d => {console.log(d);return wechat.uploadFile("https://xx.xxxxxx.cn/api/upload", res.tempVideoPath, "tempVideoPath")}).then(d => {console.log(d);}).catch(e => {console.log(e);})},fail: (e) => {console.log(e);}})},// 打开模拟的相机界面open(e) {let { type } = e.target.dataset;console.log("开启相机准备", type == "takePhoto" ? "拍照" : "录视频");this.setData({camera: true,type})},// 关闭模拟的相机界面close() {console.log("关闭相机");this.setData({camera: false})}
})

<view class="view"><view class="window"><image class="cover-9" src="{{tempImagePath}}" bindtap="img" wx:if="{{type=='takePhoto'}}"></image><video class="cover-9" src="{{tempVideoPath}}" poster="{{tempThumbPath}}" wx:if="{{type=='startRecord'}}"></video><view class="window-2"><button bindtap="open" type="primary" data-type="takePhoto">拍照</button><button bindtap="open" type="primary" data-type="startRecord">录制</button></view></view><camera class="camera" device-position="{{device?'back':'front'}}" wx:if="{{camera}}" flash="off"><cover-view class="cover-1" bindtap="camera"><cover-view class="cover-2"><cover-view class="cover-5" wx:if="{{type=='startRecord'&&startRecord}}">{{time}}S</cover-view></cover-view></cover-view><cover-image class="cover-3" src="/images/xx2.png" style="width:60rpx;height:60rpx;" bindtap="close"></cover-image><cover-image class="cover-4" src="/images/zh.png" style="width:80rpx;height:60rpx;" bindtap="devicePosition"></cover-image></camera>
</view>

css

page{height: 100%;
}
.view{width: 100%;height: 100%;
}
.window{width: 100%;height: 100%;position: absolute;
}
.window-2{display: flex;flex-direction: row;
}
.camera{width: 100%;height: 100%;
}.cover-1{width: 150rpx;height: 150rpx;border-radius: 150rpx;background-color: #dedcdc;display: flex;flex-direction: row;align-items: center;justify-content: center;position: absolute;bottom: 60rpx;left: 300rpx;
}
.cover-3{position: absolute;bottom: 105rpx;left:135rpx;
}
.cover-9{width: 728rpx;height: 80%;margin: 0 10rpx;border:2rpx solid;border-radius:5px;
}
button{margin: 0 10rpx;width: 100%;
}
.cover-4{position: absolute;top: 60rpx;right:40rpx;
}
.cover-2{width: 110rpx;height: 110rpx;border-radius: 110rpx;background-color: #ffffff;display: flex;flex-direction: row;align-items: center;justify-content: center;color:#da2121;font-size: 32rpx;
}

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: {//上传文件的大小限制,单位bytesfileSize: 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}` });});
})

上传的文件夹

素材

参考地址：

意外金喜的博客：http://blog.csdn.net/zzwwjjdj1