微信小程序判断后缀是否为图片

场景

• 上传图片和视频，将视频图片路径进行字符串拼接，
• 本地拿到服务器返回路径，进行截取 判断后缀

上传

<view class="video-view" wx:if="{{isBind}}">
  <view class="cell_row_start">
    <image class="top_img" src="/images/must.png"></image>
    <text class="top_title">请拍摄真实路线视频用于佐证</text>
  </view>
  <view style="width: 100%;height: auto;padding: 10rpx;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
    <view style="width: 180rpx;height: 180rpx;;margin: 5rpx;" wx:if="{{videoList.length>0}}" wx:for="{{videoList}}" wx:key="index">
      <video class="upload-video" src="{{item}}"></video>
    </view>
    <view class="loaction-view" bindtap="handleUpload">
      <image class="upload-img" src="/images/upload.png"></image>
    </view>
  </view>
  <view class="cell_row_start">
    <image class="top_img" src="/images/must.png"></image>
    <text class="top_title">请拍摄真实图片用于佐证</text>
  </view>
  <view style="width: 100%;height: auto;padding: 10rpx;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
    <view style="width: 180rpx;height: 180rpx;;margin: 5rpx;" wx:if="{{imgList.length>0}}" wx:for="{{imgList}}" wx:key="index">
      <image class="upload-video" src="{{item}}" bindtap="preview" data-src="{{item}}"></image>
    </view>
    <view class="loaction-view" bindtap="handleUploadImage">
      <image class="upload-img" src="/images/upload.png"></image>
    </view>
  </view>
</view>

 /**
   * 上传视频
   */
  handleUpload(){
    var that = this;
    if(that.data.videoList.length == 5){
      app.myShowToast('视频数量不能超过5个');
      return
    }
    wx.chooseMedia({
      mediaType:['video'],
      sourceType:['camera'],
      maxDuration:90,
      camera:'back',
      success(res){
        console.log('tempFiles',res.tempFiles[0].tempFilePath);
        wx.uploadFile({
          filePath: res.tempFiles[0].tempFilePath,
          name: 'files',
          url: app.globalData.base_url+'api/Api/upload_file',
          formData: {
            "openId":that.data.openInfo.openId,
          },
          method:'POST',
          header: {
            'content-type': 'multipart/form-data'
          },
          success:(res)=>{
            console.log("上传",res);
            let data = JSON.parse(res.data);
            if(data.status == 1){
              let arr =[data.url];
              that.setData({
                videoList:that.data.videoList.concat(arr)
              })
            }else{
              app.myShowToast(data.msg);
            }
            console.log("uploadFile",JSON.parse(res.data),that.data.videoList);
          }
        })
      }
    })
  },

获取

  if(res.data.status == 1){
          let urlList = res.data.res.video_url.split(',');
          let imgList = [];
          let videoList =[];
          urlList.forEach(item=>{
            if(app.isImg(item)){
              imgList.push(item);
            }else{
              videoList.push(item);
            }
          });
          console.log("urlLList",urlList,imgList,videoList);
}

/**
 * 判断是否是图片
 */
isImg:function (url) {
   //后缀获取
   let suffix = '';
   // 获取类型结果
   let result = '';
   // 分割url的“.”
   const flieArr = url.split('.');
   // 获取分割后数组最后一项就是后缀
   suffix = flieArr[flieArr.length - 1];
   if (suffix != "") {
     suffix = suffix.toLocaleLowerCase();
     // 图片格式
     const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
     // 进行图片匹配
     result = imglist.find(function (item) {
       return item === suffix
     })
     return result
   }
  /**
     * 图片预览
     */
    preview(event) {
      console.log(event);
      console.log(event.currentTarget.dataset.src)
      let currentUrl = event.currentTarget.dataset.src
      wx.previewImage({
        current: currentUrl, // 当前显示图片的http链接
        urls: this.data.imgList // 需要预览的图片http链接列表
      })
    }
},