「小程式JAVA實戰」小程式上傳短視訊（45）

Java · 發表 2018-09-14 17:31:18

摘要：個人資訊：使用者上傳短視訊。業務流程使用者選擇視訊（10秒限制），也可以通過攝像頭拍攝開啟選擇背景音樂。可以選擇音樂或者不選擇輸入視訊的描述。 controller 上傳視訊儲存視訊的截圖使用者是否選擇背景音樂7.1 是：直接儲存...

個人資訊：使用者上傳短視訊。

業務流程

使用者選擇視訊（10秒限制），也可以通過攝像頭拍攝
開啟選擇背景音樂。
可以選擇音樂或者不選擇輸入視訊的描述。
controller 上傳視訊
儲存視訊的截圖
使用者是否選擇背景音樂
7.1 是：直接儲存視訊
7.2 否：合併視訊和背景音樂，儲存視訊

微信外掛

官方介紹：https://developers.weixin.qq.com/miniprogram/dev/api/media-video.html#wxchoosevideoobject

程式碼修改

> 可以獲取到通過微信的元件獲取到視訊的長度，寬度，高度，視訊的截圖，視訊的臨時路徑，時長。然後針對這些可以判斷出來是否允許上傳。

// pages/mine/mine.js
const app = getApp()
Page({

/**
* 頁面的初始資料
*/
data: {
faceImage: "../../resource/images/noneface.png",
nickname: "暱稱",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* 使用者登出
*/
logout:function(e){
var user = app.userInfo;
wx.showLoading({
title: '正在登出中。。。'
});
wx.request({
url: app.serverUrl + "/logout?userId="+user.id,
method: "POST",
header: {
'content-type': 'application/json' // 預設值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
wx.hideLoading();
if (status == 200) {
wx.showToast({
title: "使用者登出成功~！",
icon: 'none',
duration: 3000
})
app.userInfo = null;
wx.redirectTo({
url: '../userRegister/userRegister',
})

} else if (status == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 3000
})
}
}
})
},
/**
* 頭像上傳
*/
uploadFace:function(e){
var user = app.userInfo;
var me = this;
wx.chooseImage({
count: 1, // 預設9
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
success: function (res) {
// 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
if (tempFilePaths.length>0){
console.log(tempFilePaths[0]);
wx.uploadFile({
url: app.serverUrl + "/user/uploadFace?userId=" + user.id, //僅為示例，非真實的介面地址
filePath: tempFilePaths[0],
name: 'file',
success: function (res) {
var data = JSON.parse(res.data);
console.log(data);
wx.hideLoading();
if (data.status == 200) {
wx.showToast({
title: "使用者上傳成功~！",
icon: 'none',
duration: 3000
})
me.setData({
faceUrl: app.serverUrl+data.data
})


} else if (data.status == 500) {
wx.showToast({
title: data.msg,
icon: 'none',
duration: 3000
})
}
}
})
}

}
})
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
var me = this;
wx.showLoading({
title: '正在獲取使用者資訊。。。'
});
wx.request({
url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
method: "POST",
header: {
'content-type': 'application/json' // 預設值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
var userInfo = res.data.data;
wx.hideLoading();
var faceImage = me.data.faceUrl;
if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage!=undefined){
faceImage = app.serverUrl +userInfo.faceImage;
}
me.setData({
faceImage: faceImage,
fansCounts: userInfo.fansCounts,
followCounts: userInfo.followCounts,
receiveLikeCounts: userInfo.receiveLikeCounts,
nickname: userInfo.nickname
})
}
})
},

uploadVideo:function(e){
var me = this
wx.chooseVideo({
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res);
var tempDuration = res.duration;
var tempHeight = res.height;
var tempWidth = res.width;
var tempSize = res.size;
var tempFilePath = res.tempFilePath;
var tempFilePath = res.thumbTempFilePath;
if (tempDuration>20){
wx.showToast({
title: "視訊太長了老鐵不穩~",
icon: 'none',
duration: 3000
})
} else if (tempDuration <5){
wx.showToast({
title: "視訊太短了不到5秒。老鐵不穩~",
icon: 'none',
duration: 3000
})
} else{
//進行上傳
}
}
})
},

/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {

},

/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {

},

/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {

},

/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {

},

/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {

},

/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {

},

/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {

}
})

增加選擇背景音樂的介面

>使用者可以選擇視訊，接下來我們選擇北京音樂的介面。使用者選擇音樂，或者使用者可以不選擇音樂直接提交不選擇音樂直接提交。官方介面：https://developers.weixin.qq.com/miniprogram/dev/component/audio.html

新建頁面

“` mine.js

// pages/mine/mine.js

const app = getApp()

Page({

/**
- 頁面的初始資料
  */
  data: {
  faceImage: “../../resource/images/noneface.png”,
  nickname: “暱稱”,
  fansCounts: 0,
  followCounts: 0,
  receiveLikeCounts: 0,
  },
  /**
- 使用者登出
  */
  logout:function(e){
  var user = app.userInfo;
  wx.showLoading({
  title: ‘正在登出中。。。’
  });
  wx.request({
  url: app.serverUrl + “/logout?userId=”+user.id,
  method: “POST”,
  header: {
  ‘content-type’: ‘application/json’ // 預設值
  },
  success: function (res) {
  console.log(res.data);
  var status = res.data.status;
  wx.hideLoading();
  if (status == 200) {
  wx.showToast({
  title: “使用者登出成功~！”,
  icon: ‘none’,
  duration: 3000
  })
  app.userInfo = null;
  wx.redirectTo({
  url: ‘../userRegister/userRegister’,
  })
  } else if (status == 500) {
  
  wx.showToast({
  
  title: res.data.msg,
  
  icon: ‘none’,
  
  duration: 3000
  
  })
  
  }
  
  }
  
  })
  
  },
  
  /**
- 頭像上傳
  
  */
  
  uploadFace:function(e){
  
  var user = app.userInfo;
  
  var me = this;
  
  wx.chooseImage({
  
  count: 1, // 預設9
  
  sizeType: [‘compressed’], // 可以指定是原圖還是壓縮圖，預設二者都有
  
  sourceType: [‘album’, ‘camera’], // 可以指定來源是相簿還是相機，預設二者都有
  
  success: function (res) {
  
  // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
  
  var tempFilePaths = res.tempFilePaths
  
  if (tempFilePaths.length>0){
  
  console.log(tempFilePaths[0]);
  
  wx.uploadFile({
  
  url: app.serverUrl + “/user/uploadFace?userId=” + user.id, //僅為示例，非真實的介面地址
  
  filePath: tempFilePaths[0],
  
  name: ‘file’,
  
  success: function (res) {
  
  var data = JSON.parse(res.data);
  
  console.log(data);
  
  wx.hideLoading();
  
  if (data.status == 200) {
  
  wx.showToast({
  
  title: “使用者上傳成功~！”,
  
  icon: ‘none’,
  
  duration: 3000
  
  })
  
  me.setData({
  
  faceUrl: app.serverUrl+data.data
  
  })
```
} else if (data.status == 500) {
wx.showToast({
title: data.msg,
icon: 'none',
duration: 3000
})
}
}
})
```
  }
  
  }
  
  })
  
  },
  
  /**
- 生命週期函式–監聽頁面載入
  */
  onLoad: function (options) {
  var me = this;
  wx.showLoading({
  title: ‘正在獲取使用者資訊。。。’
  });
  wx.request({
  url: app.serverUrl + “/user/queryByUserId?userId=” + app.userInfo.id,
  method: “POST”,
  header: {
  ‘content-type’: ‘application/json’ // 預設值
  },
  success: function (res) {
  console.log(res.data);
  var status = res.data.status;
  var userInfo = res.data.data;
  wx.hideLoading();
  var faceImage = me.data.faceUrl;
  if (userInfo.faceImage != null && userInfo.faceImage != ” && userInfo.faceImage!=undefined){
  faceImage = app.serverUrl +userInfo.faceImage;
  }
  me.setData({
  faceImage: faceImage,
  fansCounts: userInfo.fansCounts,
  followCounts: userInfo.followCounts,
  receiveLikeCounts: userInfo.receiveLikeCounts,
  nickname: userInfo.nickname
  })
  }
  })
  },
uploadVideo:function(e){

var me = this

wx.chooseVideo({

sourceType: [‘album’, ‘camera’],

success: function (res) {

console.log(res);

var tempDuration = res.duration;

var tempHeight = res.height;

var tempWidth = res.width;

var tempSize = res.size;

var tempFilePath = res.tempFilePath;

var thumbTempFilePath = res.thumbTempFilePath;

if (tempDuration>20){

wx.showToast({

title: “視訊太長了老鐵不穩~”,

icon: ‘none’,

duration: 3000

})

} else if (tempDuration <5){

wx.showToast({

title: “視訊太短了不到5秒。老鐵不穩~”,

icon: ‘none’,

duration: 3000

})

} else{

wx.navigateTo({

url: ‘../chooseBgm/chooseBgm?tempDuration=’ + tempDuration

+ ‘&tempHeight=’ + tempHeight

+ ‘&tempWidth=’ + tempWidth

+ ‘&tempSize=’ + tempSize

+ ‘&tempFilePath=’ + tempFilePath

+ ‘&thumbTempFilePath=’ + thumbTempFilePath

})

}

}

})

},

/**
- 生命週期函式–監聽頁面初次渲染完成
  
  */
  
  onReady: function () {
},

/**
- 生命週期函式–監聽頁面顯示
  
  */
  
  onShow: function () {
},

/**
- 生命週期函式–監聽頁面隱藏
  
  */
  
  onHide: function () {
},

/**
- 生命週期函式–監聽頁面解除安裝
  
  */
  
  onUnload: function () {
},

/**
- 頁面相關事件處理函式–監聽使用者下拉動作
  
  */
  
  onPullDownRefresh: function () {
},

/**
- 頁面上拉觸底事件的處理函式
  
  */
  
  onReachBottom: function () {
},

/**
- 使用者點選右上角分享
  
  */
  
  onShareAppMessage: function () {
}

})




** chooseBgm.wxml
<view>
<form bindsubmit='upload'>

<radio-group name="bgmId">
<block wx:for="{{bgmList}}">
<view class='container'>
<audio name="{{item.name}}" author="{{item.author}}" src="{{serverUrl}}{{item.path}}" style='width:300px' id="myAudio" controls loop></audio>
<radio style='margin-top:20px;' value='{{item.id}}'></radio>
</view>
</block>

</radio-group>

<view class="inputView">
<label class="loginLabel">視訊描述：</label>
<input name="desc" class="inputText" placeholder="說點什麼吧" />
</view>

<!-- 提交 -->
<button class="submitBtn" type="primary" form-type='submit'>上傳視訊</button>

<button class="gobackBtn" type="warn" form-type='reset'>重置</button>
</form>
</view>

chooseBgm.js

const app = getApp()

Page({
data: {
poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
name: '此時此刻',
author: '許巍',
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
serverUrl:"",
videoParams:{}
},
onLoad:function(params){
var me = this;
console.log(params);

me.setData({
videoParams:params
})

wx.showLoading({
title: '請等待...',
});
var serverUrl = app.serverUrl;
// 呼叫後端
wx.request({
url: serverUrl + '/bgm/list',
method: "POST",
header: {
'content-type': 'application/json', // 預設值
},
success: function (res) {
console.log(res.data);
wx.hideLoading();
if (res.data.status == 200) {
var bgmList = res.data.data;
me.setData({
bgmList: bgmList,
serverUrl: serverUrl
});
} else if (res.data.status == 502) {
wx.showToast({
title: res.data.msg,
duration: 2000,
icon: "none",
success: function () {
wx.redirectTo({
url: '../userLogin/login',
})
}
});
}
}
})
},
upload:function(e){
var me = this;
var datasParams = me.data.videoParams;
var bgmId = e.detail.value.bgmId;
var desc = e.detail.value.desc;
console.log("bgmId:"+bgmId);
console.log("desc:" + desc);
var tempDuration = datasParams.tempDuration;
var tempHeight = datasParams.tempHeight;
var tempWidth = datasParams.tempWidth;
var tempSize = datasParams.tempSize;
var tempFilePath = datasParams.tempFilePath;
var thumbTempFilePath = datasParams.thumbTempFilePath;
var userId = app.userInfo.id;


debugger;
wx.showLoading({
title: '請等待...',
});
var serverUrl = app.serverUrl;
// 呼叫後端
wx.uploadFile({
url: serverUrl + '/video/upload',
filePath: tempFilePath,
formData:{
userId: userId,
bgmId: bgmId,
videoSeconds: tempDuration,
videoWidth: tempWidth,
videoHeight: tempHeight,
desc: desc,
},
name: 'file',
success:function(res){
console.log(res);
wx.hideLoading();
}

})
}
})

後端開發

後端介面在一個伺服器上，後端的web在一臺伺服器上。後端的web上傳小程式，需要同步到後端介面所在的一個伺服器上。我們選擇zokeeper。後邊會講

service中新增

BgmService.java

package com.idig8.service;

import java.util.List;

import com.idig8.pojo.Bgm;

public interface BgmService {

/**
* 獲取所有的Bgm列表
* @return
*/
public List<Bgm> queryBgmList();
}

BgmServiceImpl.java

package com.idig8.service.Impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import com.idig8.mapper.BgmMapper;
import com.idig8.pojo.Bgm;
import com.idig8.service.BgmService;

@Service
public class BgmServiceImpl implements BgmService {

@Autowired
private BgmMapper bgmMapper;


@Transactional(propagation =Propagation.SUPPORTS)
@Override
public List<Bgm> queryBgmList(){

return bgmMapper.selectAll();
}

}

BgmController.java

package com.idig8.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.idig8.service.BgmService;
import com.idig8.utils.JSONResult;

import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;

@RestController
@Api(value="背景音樂介面",tags={"背景音樂介面的controller"})
@RequestMapping(value = "/bgm")
public class BgmController extends BasicController{

@Autowired
private BgmService bgmService;



@ApiOperation(value="獲取所有背景音樂",notes="通過獲取所有背景音樂")
@PostMapping("/list")
public JSONResult list() {
return JSONResult.ok(bgmService.queryBgmList());
}


}

介面已經在swagger驗證通過。

小程式開發環境中會報net::ERR_INSUFFICIENT_RESOURCES這個錯誤，在真機中，不會出現該錯誤，忽略即可。

PS：通過個人頁面傳遞視訊資訊，到開發新介面背景音樂和描述，最後到檔案資訊上傳到後臺功能已經開發完畢。

ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/09/14/xiaochengxujavashizhanxiaochengxushangchuanduanshipin45/">百度未收錄

>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！

>>原文連結地址：

「小程式JAVA實戰」小程式上傳短視訊（45）

業務流程

微信外掛

後端開發

您可能也會喜歡…