微信小程序实现上传视频功能(后端代码是java)
1.前端
wxml文件
<image bindtap="uploadVideo" length="3" src="../../assets/imgs/ship_img.png" class="shiping_img"></image>
/**
* 选择视频
*/
uploadVideo() {
let _this = this;
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: 'back',
success(res) {
_this.videos = [];
const src = res.tempFilePath;
_this.videos = _this.videos.push(src);
}
});
}
上传文件
/**
*
* @param file 上传文件
*/
uploadFile(file: any) {
let that = this;
wx.uploadFile({
url: AppServiceProvider.BASE_DOMAIN + 'api/circle/uploadFile?token=' + this.appService.getToken(), //仅为示例,非真实的接口地址
filePath: file,
name: 'files',
success(res) {
let filePath = JSON.parse(res.data).data.filePath;
let imgPath = JSON.parse(res.data).data.imgPath;
let url = JSON.parse(res.data).data.url;
that.data.files.push(filePath);
if (imgPath != '') {
that.data.files.push(imgPath);
that.data.pics.push(url);
setTimeout(() => {
that.setData!({ pics: that.data.pics });
}, 500);
console.log(that.data.pics);
}
}
});
},
接口代码
/**
* 上传视频
*
* @author Chuck Don
* @since 2017年7月31日
*/
@ValidateToken(isValidate = false)
public void uploadFile() {
UploadFile file = getFile();
String fileURL = file.getFileName();
String filePostfix = fileURL.substring(fileURL.lastIndexOf("."), fileURL.length());
String filePath;
String prefix=UUID.randomUUID().toString().replace("-", "");
filePath =CircleUtil.SAVE_PATH_VIDEO + prefix + filePostfix;
String path = PathKit.getWebRootPath() + "/" + filePath;
File f = new File(path);
if (f.exists()) {
f.delete();
}
file.getFile().renameTo(f);
file.getFile().delete();
String imgPath="";
if(".mp4".equals(filePostfix)) {
imgPath=CircleUtil.SAVE_PATH_PIC + prefix + ".png";
String outImgPath=PathKit.getWebRootPath() + "/" + imgPath;
CircleUtil.videoCatchImg(path, outImgPath);
}
Record record = new Record();
record.set("filePath", filePath);
record.set("imgPath", imgPath);
record.set("url", HtmlUtil.getFileHttpAllPath(imgPath, getBasePath()));
renderJson(new CodeBean<Record>(SystemCode.SYSTEM_OK, record));
}
使用微信小程序云开发写的个人简历小程序和好玩的关联微信运动遛狗的小程序,内置天气查询功能。欢迎大家扫码体验,项目详情也可到我的置顶博客查看。项目都已在码云上开源,欢迎大家star。wx_superpet这个小程序项目特别适合对微信小程序云开发技术感兴趣的同学参考。
个人简历源码:个人简历码云地址
wx_superpet源码:wx_superpet码云地址