uni-app转化为小程序代码,微信开发者工具开发小程序,视频上传功能
前端页面代码
<view class="xx-line">
<view class="xx-lable">图片/视频</view>
<view class="xx-item">
<zw-upload-img vue-id="46013ec5-1" name="imgUrl" showTitle="{{false}}" showNum="{{false}}" num="{{5}}"
dataList="{{dataList}}" data-event-opts="{{[['^chooseImg',[['actioncnt']]],['^close',[['delImg']]]]}}"
bind:chooseImg="__e" bind:close="__e" bind:__l="__l"></zw-upload-img>
</view>
</view>
<block wx:if="{{m.src != ''}}">
<view class="xx-line">
<view class="xx-lable">视频预览</view>
<view class="xx-item">
<view data-event-opts="{{[['tap',[['sc',['$event']]]]]}}" bindtap="__e">X</view>
<video src="{{m.src}}" class="videos" ></video>
</view>
</view>
</block>
前端js代码,选择上传照片、视频上传,这里只提供视频代码
/**
* 图片 视频 选择框
*/
actioncnt: function actioncnt() {
var _this = this;
wx.showActionSheet({
itemList: ['图片', '视频'],
success: function(res) {
if(res.tapIndex == 0) {
_this.chooseImg()
}
if(res.tapIndex == 1) {
_this.uploadvideo()
}
},
fail: function(res) {
console.log(res.errMsg)
}
})
},
uploadvideo: function uploadvideo() {
var that = this;
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: function (res) {
const tempFilePath = res.tempFilePath;
console.log("1------tempFilePath="+tempFilePath);
that.m.src = tempFilePath;
uni.uploadFile({
url: that.apiIP +'/wrfz/uploadVideo',
filePath: tempFilePath ,
name: 'file',
header: {
token: 'a279fea3c5e2bcf12ee6f4749c747931'
},
formData: {},
success: function(res) {
res = JSON.parse(res.data)
console.log(res)
if(res.result){
console.log("视频上传成功")
}else{
console.log("视频上传失败")
}
},
fail: function(res) {
console.log("视频上传失败")
}
})
}
});
},
后端代码
@RequestMapping(value="/uploadVideo",method=RequestMethod.POST)
@ResponseBody
public Object uploadVideo(ComWrfzSb wrfz,HttpServletRequest request,@RequestParam("file")MultipartFile files){
String name=fileUploadVideo(request, files);
return name;
}