微信小程序组件：图片、视频、语音上传

该组件封装了图片、视频、语音上传功能，也是最近开发过程中的一个收获，如图：

组件相关代码

uploader.wxml

<scroll-view class="upload-file" scroll-y="true"><view class="audio-container" wx:if="{{voice}}"><view class="audio-area" bindtap="voicePlay"><image src="{{voiceIco}}" mode="widthFix" class="voice-play"></image><text class="duration">{{durationShow}}</text></view></view><view class="video-area" wx:if="{{video}}"><view class="video-container"><video id="myVideo" class="vd-show" src="{{video.url}}" binderror="videoErrorCallback" show-center-play-btn='true'show-play-btn="{{true}}" controls picture-in-picture-mode="{{['push', 'pop']}}"bindenterpictureinpicture='bindVideoEnterPictureInPicture'bindleavepictureinpicture='bindVideoLeavePictureInPicture'></video><view class="del" bindtap="delVideo"><image src="/images/del.png" class="del-ico"></image></view></view></view><view class="image-area" wx:if="{{images.length>0}}"><block wx:for="{{images}}" wx:key="index"><view class="up-img"><image class="uploader-img" src="{{item.url}}" mode="aspectFill"></image><view class="del" data-index="{{index}}" bindtap="delThisImg"><image src="/images/del.png" class="del-ico"></image></view></view></block><view class="upload-add" bindtap="uploadImage"><image class="uploader-img" src="../../images/upadd.png" mode="aspectFill"></image></view></view>
</scroll-view>
<view class="foot" wx:if="{{send}}"><view class="upload-area"><view bindtap="uploadImage" class="up-item"><image src="../../images/pic.png" mode="widthFix" class="up-ico"></image></view><view bindtap="uploadVideo" class="up-item"><image src="../../images/video.png" mode="widthFix" class="up-ico"></image></view><view bindtap="showAudioIn" class="up-item"><image src="../../images/icon_voice.png" mode="widthFix" class="up-ico"></image></view><slot name="at"></slot></view><slot name="btn"></slot>
</view><view class="audio-in" wx:if="{{audioIn}}"><button bindtouchstart="streamRecord" bindtouchend="streamRecordEnd">按住说话</button>
</view>

uploader.wxss

.foot {display: flex;position: fixed;bottom: 0;left: 0;right: 0;padding: 20rpx;border-top: 1px solid #eaeaea;
}.upload-area {flex: 1;
}.up-item {float: left;margin-right: 30px;
}.up-ico {width: 30px;
}.up-text {display: block;font-size: 14px;
}.audio-in {position: fixed;bottom: 0;left: 0;right: 0;padding: 40px;background-color: #ccc;}.image-area {width: 100%;
}.image-area:after {content: "";display: block;visibility: hidden;clear: both;
}.up-img {position: relative;float: left;margin-right: 8px;
}.uploader-img {width: 84px;height: 84px;
}.del {position: absolute;right: 0;top: 0;background-color: rgba(0, 0, 0, 0.8);width: 20px;height: 20px;
}.del-ico {margin-top: 2px;margin-left: 2px;width: 16px;height: 16px;
}.upload-add {float: left;margin-bottom: 8px;width: 84px;height: 84px;box-sizing: border-box;background-color: #EDEDEd;text-align: center;vertical-align: middle;
}.audio-container {width: 100%;height: 50px;
}.audio-area {position: relative;width: 200px;height: 36px;background-color: #21c38f;border-radius: 18px;margin-bottom: 10px;
}.voice-play {width: 20px;height: 20px;margin-top: 8px;margin-left: 10px;
}.duration {position: absolute;margin-left: 10px;height: 36px;line-height: 36px;font-size: 14px;font-family: microsoft yahei;
}.video-container {width: 60%;position: relative;
}.vd-show {width: 100%;
}.getted {color: #222;max-width: 60%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.upload-file{height: 300px;
}

uploader.js

const $util = require('../../utils/util.js')const plugin = requirePlugin("WechatSI")
const manager = plugin.getRecordRecognitionManager()let app = getApp()
Component({lifetimes: {attached: function () {// 初始化录音this.initRecord()this.innerAudioContext = wx.createInnerAudioContext();this.innerAudioContext.onError(function (res) {wx.showToast({title: '语音播放失败',icon: 'none'})})}},options: {multipleSlots: true},/*** 组件的属性列表*/properties: {images: Array,video: Object,voice: Object,duration: Number,durationShow: String},/*** 组件的初始数据*/data: {info: null,recordStatus: false, //录音状态audioIn: false,send: true,images: [],desc: '',duration: 0,voice: null,video: null,voiceIco: '../../images/voice.png',durationShow: ''},/*** 组件的方法列表*/methods: {/*** 按住按钮开始语音识别*/streamRecord: function (e) {console.log("streamrecord", e)this.setData({//录音状态      recordStatus: true})//开始识别    manager.start({lang: 'zh_CN', //识别的语言，目前支持zh_CN en_US zh_HK sichuanhuaduration: 30000, //指定录音的时长，单位ms，最大为60000。如果传入了合法的 duration ，在到达指定的 duration 后会自动停止录音})},/*** 松开按钮结束语音识别*/streamRecordEnd: function (e) {console.log("streamRecordEnd", e)manager.stop()this.hideAudioIn()},/*** 初始化语音识别回调* 绑定语音播放开始事件*/initRecord: function () {console.log('==语音初始化==', manager)let that = thismanager.onRecognize = function (res) {console.log("current result", res.result)}manager.onStart = function (res) {console.log("成功开始录音识别", res)}manager.onStop = function (res) {console.log('..............结束录音')console.log('录音临时文件地址 -->' + res.tempFilePath);console.log('录音总时长 -->' + res.duration + 'ms');console.log('文件大小 --> ' + res.fileSize + 'B');console.log('语音内容 --> ' + res.result);if (res.result == '') {wx.showModal({title: '提示',content: '听不清楚，请重新说一遍！',showCancel: false,success: function (res) {}})return;}that.setData({desc: res.result,duration: res.duration,durationShow: $util.formatDuration(res.duration)})that.uploadFile('mp3', res.tempFilePath, 'voice')}manager.onError = function (res) {console.error("error msg", res.msg)}},// 上传图片uploadImage: function () {let that = thiswx.chooseImage({success(res) {const tempFilePaths = res.tempFilePathstempFilePaths.forEach((element, index) => {that.uploadFile('jpg,gif,png', element, 'image')});}})},showAudioIn: function () {this.setData({audioIn: true,send: false})},hideAudioIn: function () {this.setData({audioIn: false,send: true})},voicePlay: function () {let that = thisthis.innerAudioContext.src = this.data.voice.url; //链接到音频的地址this.innerAudioContext.onPlay(() => {that.setData({voiceIco: '../../images/play.gif'})}); //播放音效this.innerAudioContext.onEnded(() => {that.setData({voiceIco: '../../images/voice.png'})});this.innerAudioContext.play()},// 上传视频uploadVideo: function () {var that = this;wx.chooseVideo({maxDuration: 60,success: function (res) {var tempFilePath = res.tempFilePath;// 上传文件that.uploadFile('mp4', tempFilePath, 'video')},fail: function (e) {console.error(e);}})},// 上传文件到服务器uploadFile: function (uploadExt, path, type) {let that = thiswx.uploadFile({url: app.globalData.domain + 'base/upload/index?type=' + uploadExt,filePath: path,name: 'file',formData: {},success(res) {let ret = JSON.parse(res.data)console.log(ret)if (type == 'image') {let images = that.data.imagesimages.push(ret.data)that.setData({images: images})}if (type == 'video') {that.setData({video: ret.data})}if (type == 'voice') {that.setData({voice: ret.data,})}that.triggerEvent("myevent", that.data)}})},addLocation: function () {let that = thisqqmapsdk.reverseGeocoder({success: function (res) {console.log(res.result);that.setData({location: res.result.address,lat: res.result.location.lat,lng: res.result.location.lng})}})},// 删除上传的图片delThisImg: function (e) {let that = thislet images = that.data.imagesimages.splice(e.currentTarget.dataset.index, 1);that.setData({images: images})that.triggerEvent("myevent", that.data)},delVideo: function () {this.setData({video: null})this.triggerEvent("myevent", this.data)}}
})

调用组件相关代码

json文件

{"usingComponents": {"uploader": "/components/uploader/uploader"}
}

wxml文件

  <uploader images="{{images}}" voice="{{voice}}" duration="{{duration}}" durationShow="{{durationShow}}"video="{{video}}" bindmyevent="getFiles"><button slot="btn" class="btn" form-type="submit" size="mini" style="width:60px;">发布</button></uploader>

js文件

// 获取上传的文件
getFiles: function(e){this.setData({images: e.detail.images,audio: e.detail.voice,duration: e.detail.duration,video: e.detail.video})}

微信小程序之图片、视频、语音上传-小程序文档类资源-CSDN下载微信小程序实现图片、视频、语音上传功能更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/miracle0623/57830425?spm=1001.2014.3001.5501

微信小程序组件：图片、视频、语音上传相关推荐

微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
小程序上传视频的php接口处理,微信小程序[第十二篇] -- 上传视频
通过上一篇的学习,我们可以成功将宝宝的照片传到指定相册了,但是可爱的宝宝岂能只有照片,小视频必须同步跟上,莫问题!咱这篇就来一个视频上传的实现. 俺家小核桃镇贴. 服务端其实对于yii2程序而言,如 ...
微信小程序-组件化开发（上）
微信小程序(以下简称"小程序",版本)虽然默认定义了很多有用的组件,但是在开发小程序过程中,往往需要自定义业务组件. 而小程序开发者文档中却未对自定义组件给出很好的解决方案或示例. ...
微信小程序聊天室+websocket+文件上传（发送图片）
最近哥们在写微信小程序,其中有个需求是搭建一个聊天室,可多人聊天,可私聊,可发送图片.但是由于一直没有这方面相关的了解,于是慢慢的去看,去做,前期真的很困难,路子不好走,慢慢的再搭建. 先看看效果吧 ...
微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
Java生成微信小程序二维码、上传至阿里云OSS
依赖 <dependency><groupId>com.aliyun.oss</groupId><artifac ...
Udesk对接微信小程序实现商品浏览轨迹上传
作者:张振琦 Udesk提供了小程序专用的行为轨迹SDK,可以用来收集客户的商品浏览轨迹,并在客服对话窗口中访问轨迹处可以查看. 在开发之前,需要先完成两个操作: 确认Udesk客服系统内绑定的小程序 ...

微信小程序组件：图片、视频、语音上传

微信小程序组件：图片、视频、语音上传相关推荐

最新文章

热门文章