微信小程序实现上传视频功能（后端代码是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码云地址

微信小程序实现上传视频功能（后端代码是java）相关推荐

微信小程序实现上传视频功能
首先我们先来编写一个上传视频的函数 _skipArtileList:throttle(function(e){let that=this wx.chooseMedia({count: 1, //上传 ...
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
微信小程序（上传照片功能、统计字数功能）
微信小程序仿淘宝申请界面中的"申请描述" 效果图:(上传照片功能.统计字数功能) .wxml : <view class="apply-describe" ...
微信小程序同时上传视频和图片（支持多选）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言二.使用步骤 1.小程序页面代码 2.小程序JS内代码总结前言随着小程序的的不断发展,小程序技术也越来越广泛了, ...
微信小程序录音上传功能
微信小程序录音上传录音弹窗wxml代码:  <view class="cui-record" hidden="{{isHid ...
微信小程序如何上传音视频到百度云Bos cloud BCE
在做了一系列调查之后,目前为止暂未发现有相关的文章,在此简单记录一下解决此问题的步骤,造福来人. 本人的解决方案参考了百度云BOS官方文档,地址如下: https://cloud.baidu.com/ ...
微信小程序实现上传视屏并编辑
阅读说明: 本文是实现用户上传视频并可以在线播放,选择删除.视频上传到云存储,并在云数据库中添加记录. 下面包含:1效果截图及截图说明,2实现步骤及源码. 1:效果截图及截图说明: 1.1初次进入页面 ...
上传声音微信小程序_SpringBoot开发案例之微信小程序录音上传
前言书接上回的<SpringBoot开发案例之微信小程序文件上传>,正常的业务流程是,口语测评需要学生通过前端微信小程序录入一段音频,通过调用第三方音频处理服务商进行评分,然后服务端对原 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...

微信小程序实现上传视频功能（后端代码是java）

微信小程序实现上传视频功能（后端代码是java）

微信小程序实现上传视频功能（后端代码是java）相关推荐

最新文章

热门文章