微信小程序如何导入微信聊天记录的文件？

以前找工作的时候，发现了小程序居然可以直接导入微信聊天记录的文件，这次我们也遇到了需要同样的需求。

因为各种原因，这里使用原生小程序开发，所以以下的代码都是原生小程序的代码，如果你是使用了uniapp开发的话，根据实际需求自己改造一下吧~

效果图

先贴一个效果图！

封装

我们将这个封装成为一个组件。

这里我们使用vant组件库来作为ui库。

<van-action-sheet show="{{ showUploadFile }}" title="导入文件" bind:close='handleCloseUploadFile'>
  <view class="file-box">
    <view class="file-box-item" bind:tap="handleUploadWXFile">
      <image lay-src="/static/weixinFile.png" class="file-img" />
      <text class="file-text">微信文件</text>
    </view>
    <view class="file-box-item" bind:tap="handleUploadWXImg">
      <image lay-src="/static/file.png" class="file-img" />
      <text class="file-text">微信图片</text>
    </view>
    <van-uploader bind:after-read="handleUploadLocalImg">
      <view class="file-box-item">
        <image lay-src="/static/localImg.jpg" class="file-img" />
        <text class="file-text">本地相册</text>
      </view>
    </van-uploader>
  </view>
</van-action-sheet>

// components/chooseFile/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    showUploadFile: {
      type: Boolean,
      value: false
    },
    count: {
      type: Number,
      value: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 关闭上传文件的页面
    handleCloseUploadFile() {
      this.setData({
        showUploadFile: false
      })
    },
    // 导入微信文件
    handleUploadWXFile() {
      wx.chooseMessageFile({
        count: this.data.count,
        type: 'file',
        success: (res) => {
          console.log('res', res);
          this.triggerEvent('wxFile', res.tempFiles)
        },
        fail() {
          wx.showToast({
            title: '导入失败，请重试',
            icon: 'none'
          })
        }
      })
    },
    // 导入微信图片
    handleUploadWXImg() {
      wx.chooseMessageFile({
        count: this.data.count,
        type: 'image',
        success: (res) => {
          this.triggerEvent('wxImg', res.tempFiles)
        },
        fail() {
          wx.showToast({
            title: '导入失败，请重试',
            icon: 'none'
          })
        }
      })
    },
    // 导入本地图片
    handleUploadLocalImg(event) {
      console.log('event', event);
      const {
        file
      } = event.detail;
      this.triggerEvent('localImg', file)
    }
  }
})

.file-box {
  display: flex;
}

.file-box-item {
  display: flex;
  flex-direction: column;
  height: 160rpx;
  width: 160rpx;
  justify-content: center;
  align-items: center;
}

.file-img {
  height: 80rpx;
  width: 80rpx;
}

.file-text{
  font-size: 28rpx;
}

使用

<van-button type="primary" size="large" icon='down' bindtap="handlePopup">
  <text style="margin-left: 10rpx;">点击导入</text>
</van-button>

<van-popup show="{{ visible }}" bind:close="handleOnClose"   position="bottom">
  <chooseFile bindwxFile='handleUploadWXFile' bindwxImg="handleUploadWXImg" bindlocalImg="handleUploadLocalImg" />
</van-popup>

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    visible: false
  },

  handleOnClose(e) {
    this.setData({
      visible: false
    })
  },
  handlePopup() {
    this.setData({
      visible: true
    });
  },
  // 导入微信聊天的文件
  handleUploadWXFile(file) {
    this.handleUploadFile(file)
  },
  // 导入微信聊天的图片
  handleUploadWXImg(file) {
    this.handleUploadFile(file)
  },
  // 导入本地或者拍照的图片
  handleUploadLocalImg(file) {
    this.handleUploadFile(file)
  },
  // 上传文件
  handleUploadFile() {
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: {
        // TODO 这里是上传的额外参数
        user: 'test'
      },
      success: (res) => {
        console.log('res', res);
        // TODO 上传完毕后执行
      },
    });
  }
})