最近在做一個小程序狰域，帖子中用到了一個關(guān)于文字、圖片和視頻的一些操作黄橘。

最終的樣式

未添加任何圖片和視頻

點擊視頻和圖片的任意一個上傳按鈕就會開始上傳

wx-1.png

添加圖片

這部分可以對圖片進行預覽和刪除

wx-2.png

添加視頻

視頻和刪除和播放

wx-3.png

這個可以實現(xiàn)輸入文字的統(tǒng)計和限制兆览，圖片的上傳、預覽和刪除塞关，視頻的上傳和刪除功能抬探。

如何實現(xiàn)上面的那些樣式呢？

大家可以先閱讀下面的文檔帆赢，會發(fā)現(xiàn)其實很簡單小压。

小程序關(guān)于圖片操作的api文檔：https://developers.weixin.qq.com/miniprogram/dev/api/wx.compressImage.html

小程序關(guān)于視頻操作的api文檔：https://developers.weixin.qq.com/miniprogram/dev/api/wx.saveVideoToPhotosAlbum.html

首先wxml文件

<view class="containor">
  <view class="publish_text_area">
    <!-- 標題 -->
    <view class="text_area_title">
      <input 
        class="title_input" 
        placeholder="請輸入標題" 
        maxlength="25" 
        placeholder-style="color:#b3b3b3;font-size:16px;" 
        bindinput="handleTitleInput"
        value="{{title}}"
      ></input>
      <!-- 標題字數(shù)限制 -->  
      <view 
        class="{{ titleCount < 25 ? 'title_input_counter' : 'title_input_error_counter' }}"
      >{{titleCount}}/25</view>
    </view>
    <!-- 內(nèi)容 -->
    <view class="text_area_content">
      <view class="area_content">
        <view class="area_content_out">
          <textarea 
            class="content-textarea" 
            placeholder="請輸入正文內(nèi)容..." 
            maxlength="255" 
            placeholder-style="color:#b3b3b3;font-size:12px;"
            style="height: 8rem" 
            bindinput="handleContentInput" 
            value="{{content}}"
          />
          <!-- 字數(shù)限制 -->  
          <view class="{{ contentCount < 255 ? 'content_textarea_counter' : 'content_textarea_error_counter'}}">{{contentCount}}/255</view>
        </view>
      </view>
    </view>
  </view>

  <view class="publish_imgs_area">
    <!-- 圖片 -->
    <view class="imgs_area" wx:for="{{images}}" wx:key="*this">
      <view class="iamge_item">
        <image 
          class="iamge_content" 
          src="{{item}}" 
          data-id="{{index}}"
          mode="aspectFill" 
          bindtap="previewIamge"
        />
        <image 
          class="iamge_cancel" 
          src="./images/cancel.png" 
          mode="aspectFill" 
          data-id="{{index}}"
          bindtap="deleteImage"
        />
      </view>
    </view>
    <!-- 視頻 -->
    <view class="video_area" wx:if="{{video != ''}}">
      <video
        class="video_item"
        src="{{video}}"
        controls
      ></video>
      <image 
        class="video_delete" 
        src="./images/video_del.png" 
        mode="aspectFill" 
        bindtap="videoDelete"
      />
    </view>
    <!-- 圖片上傳圖片按鈕 -->
    <view class="imgs_area" bindtap="chooseImage" wx:if="{{images.length < 9 && video == ''}}">
      <view class="iamge_item">
        <image class="iamge_content" src="./images/upload.png" mode="aspectFill" />
      </view>
    </view>
    <!-- 視頻上傳圖片按鈕 -->
    <view class="imgs_area" bindtap="chooseVideo" wx:if="{{video == '' &&  images.length == 0}}">
      <view class="iamge_item">
        <image class="iamge_content" src="./images/video.png" mode="aspectFill" />
      </view>
    </view>
  </view>
  <view class="btn_all_area">
    <button
      class="btn_area"
      type="primary"
      bindtap="submitClick"
    >提交</button>
    <button
      class="btn_area"
      type="warn"
      bindtap="resetClick"
    >重置</button>
  </view>
</view>

接下來wxss文件

page {
    background-color: #f1efef;
}

.containor {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.publish_text_area {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:20rpx 20rpx 6rpx 20rpx;
    border-radius: 15rpx;
}

.text_area_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 10rpx;
}

.text_area_content {
    
}

.title_input {
    font-size: 30rpx;
    width:590rpx;
}

.title_input_counter {
    font-size:32rpx;
    color:#b3b3b3;
    margin-top:5rpx;
}

.title_input_error_counter {
    font-size:32rpx;
    color:#ce2f2f;
    margin-top:5rpx;
}

.area_content {
    border-top: 1rpx solid #f1efef;
    margin-left: 10rpx;
    margin-right: 10rpx;
}

.area_content_out {
    /* border-top: 1px solid #f1efef; */
    margin-top: 10rpx;
}

.content-textarea {
    width: 690rpx;
    font-size: 24rpx;
}

.content_textarea_counter {
    color:#d4d0d0;
    font-size:30rpx;
    text-align:right;
}

.content_textarea_error_counter {
    color:#ce2f2f;
    font-size:30rpx;
    text-align:right;
}
/* 圖片部分 */
.publish_imgs_area{
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-radius: 15rpx;
    margin: 20rpx;
    padding-left: 8rpx;
    padding-top: 8rpx;
    padding-bottom: 8rpx;
    /* height: 450rpx; */
}

.iamge_item {
    width: 225rpx;
    height: 225rpx;
    padding: 4rpx;
}

.iamge_content{
    width: 223rpx;
    height: 223rpx;
    border-radius: 15rpx;
    border: 1px solid #f1efef;
}

.iamge_cancel{
    width:40rpx;
    height:40rpx;
    border-radius:50%;
    position:relative;
    top:-259rpx;
    right:-204rpx;
    z-index:800;
}

/* 視頻部分樣式 */
.video_area {
    width: 700rpx;
    position: relative;
}

.video_item {
    width: 700rpx;
}
.video_delete {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    top: 10rpx;
    right: 2rpx;    
}

.btn_all_area {
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin:20rpx 20rpx 6rpx 20rpx;
    border-radius: 15rpx;
    /* position: absolute;
    bottom: 0; */
}

.btn_area {
    width: 350rpx;
}

最后是Js文件

對于圖片的上傳，可以存在兩種情況：1椰于、第一次就上傳了九張圖片怠益；2、第一次不夠九張瘾婿，第二次接著上傳蜻牢。所有我們需要對這個條件就行判斷。

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    // 標題數(shù)
    titleCount: 0,
    // 詳情數(shù)
    contentCount: 0,
    // 標題內(nèi)容
    title: '',
    // 標題內(nèi)容
    content: '',
    // 圖片列表
    images: [],
    // 視頻
    video : '',
  },

  // 圖片操作的具體函數(shù)
  ImageOperator() {
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res =>  {
        // 上傳的圖片數(shù)據(jù)
        const imgList = res.tempFilePaths;
        // 原始的圖片數(shù)據(jù)
        const imageList = this.data.images;

        // 原來的圖片數(shù)量
        let imageLenght = imageList.length;
        // 當前的圖片數(shù)量
        let nowLenght = imgList.length;
        console.log(imageLenght);

        if ( imageLenght == 9 ) {
          console.log("數(shù)量已經(jīng)有9張憋他，請刪除在添加...");
        }
        if ( imageLenght < 9 ) {
          let images = [];
          // 獲取缺少的圖片張數(shù)
          let residue = 9 - imageLenght;
          // 如果缺少的張數(shù)大于當前的的張數(shù)  
          if ( residue >= nowLenght ) {
            // 直接將兩個數(shù)組合并為一個  
            images = imageList.concat(imgList);
          }else {
            // 否則截取當前的數(shù)組一部分  
            images = imageList.concat(imgList.slice(0, residue));
          }  
          this.setData({
            images
          })
        }
      }
    })
    
  },

  // 標題操作
  handleTitleInput(event) {
    let inputValue = event.detail.value;
    // 確保標題不存在空格  
    if(inputValue.lastIndexOf(" ") != -1){
      inputValue = inputValue.substring(0, inputValue.lastIndexOf(" "));
    }
    let titleCount = inputValue.length;
    if(titleCount <= 25){
      this.setData({
        titleCount: titleCount ,
        title: inputValue
      })
    }
  },
  // 內(nèi)容操作
  handleContentInput(event) {
    let textareaValue = event.detail.value;
    let contentCount = textareaValue.length;
    if(contentCount <= 255){
      this.setData({
        contentCount: contentCount,
        content: textareaValue
      })
    }
  },
  // 圖片獲取
  chooseImage() {
    if (this.data.images.length == 0) {
      wx.showToast({
        title: '視頻和圖片只能選擇上傳一種類型!',
        icon: 'none',
        duration: 2000,
        success: res => {
          this.ImageOperator()
        }
      })
    }else {
      this.ImageOperator()
    }
    
  },
  // 刪除圖片
  deleteImage(event) {
    //獲取數(shù)據(jù)綁定的data-id的數(shù)據(jù)
    const nowIndex = event.currentTarget.dataset.id;
    let images = this.data.images;
    images.splice(nowIndex, 1);
    this.setData({
      images
    })
  },
  // 預覽圖片
  previewIamge(event) {
    const nowIndex = event.currentTarget.dataset.id;
    const images = this.data.images;
    wx.previewImage({
      current: images[nowIndex],  //當前預覽的圖片
      urls: images,  //所有要預覽的圖片
    })
  },
  // 上傳視頻
  chooseVideo() {
    // 彈層  
    wx.showToast({
      title: '視頻和圖片只能選擇上傳一種類型!',
      icon: 'none',
      duration: 2000,
      success: res => {
        wx.chooseVideo({
          sourceType: ['album', 'camera'],
          compressed: true,
          maxDuration: 10,
          camera: 'back',
          success: res => {
            console.log(res);
            const video = res.tempFilePath;
            this.setData({video})
          }
        })
      }
    })
  },
  // 刪除視頻
  videoDelete(){
    wx.showModal({
      title: '警告',
      content: '確定要刪除該視頻嗎',
      success: res => {
        if (res.confirm) {
          this.setData({
            video: ''
          })
        }
      }
    })
  },
  // 表單提交事件
  submitClick() {

  },
  // 重置表單
  resetClick() {
    wx.showModal({
      title: '警告',
      content: '重置表單將需要重新上傳數(shù)據(jù)',
      success: res => {
        if (res.confirm) {
          this.setData({
            titleCount: 0,
            contentCount: 0,
            title: '',
            content: '',
            images: [],
            video : ''
          })
        }
      }
    })
  }
})

這樣就實現(xiàn)了孩饼，代碼還有很多需要優(yōu)化的地方，如果需要請自行斟酌使用竹挡！