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

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

组件相关代码

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

调用组件相关代码

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
    })
  }