微信小程序上传聊天窗中的文件

最新推荐文章于 2024-09-06 18:27:23 发布

醉里挑灯寻梦回

最新推荐文章于 2024-09-06 18:27:23 发布

阅读量1.7k

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/liuxiaocaie/article/details/122211166

版权

这篇博客详细介绍了微信小程序中如何实现文件选择、上传、状态显示以及文件解析功能。用户点击虚线框选择文件，根据文件类型提示用户，并在上传后展示进度条。文件解析成功或失败会显示相应状态，用户可以导入解析成功的文件。同时，提供了批量上传教程和错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

懒得删删减减了，全部拷过来。效果如下，

1、点击虚线框选中文件夹并且切换样式，展示文件名字，

2、选中后上传扭变色，然后点上传上传接口

1、html

<!--推荐加盟-->
<image class="jrecommend-bg" src="/images/jrecommend-bg.jpg"></image>
<image class="jrecommend-top" src="/images/jrecommend-img.png"></image>


<view class="jrecommend mt400">
  <view class="tatle">请按照标准模板进行上传</view>

  <view class="xlsx" bindtap="xuanze">
    <view wx:if="{{state == 1}}">
      <view style="width: 50rpx;height: 50rpx;margin: 50rpx auto 40rpx;">
        <image wx:if="{{!wenzi}}" style="width: 100%;height: 100%;" src="/images/wenjianjia.png"></image>
        <image wx:if="{{wenzi}}" style="width: 100%;height: 100%;" src="/images/dianji.png"></image>
      </view>

      <view wx:if="{{!wenzi}}" style="color: black;font-style: 24rpx;">点我选择，文件所在的微信聊天窗口</view>
      <view wx:if="{{wenzi}}" style="color: black;font-style: 24rpx;">点击下方按钮上传文件</view>

      <view style="color: #6a6a6a;margin-top: 20rpx;">
        <text wx:if="{{!filename}}"> 支持扩展名:xls </text>
        <text wx:if="{{filename}}">{{filename}}</text> </view>
      </view>

    <view wx:if="{{state == 2}}">
      <view style="width: 50rpx;height: 50rpx;margin: 50rpx auto 40rpx;"><image style="width: 100%;height: 100%;" src="/images/jiazai.png"></image></view>
      <view style="color: black;font-style: 24rpx;">文件解析中，请稍后...</view>
      <view style="color: #6a6a6a;margin-top: 20rpx;">(大约10秒即可完成)</view>
    </view>

    <view wx:if="{{state == 3}}">
      <view style="width: 50rpx;height: 50rpx;margin: 50rpx auto 40rpx;"><image style="width: 100%;height: 100%;" src="/images/shibai.png"></image></view>
      <view style="color: black;font-style: 24rpx;">解析失败，点我重新上传</view>
      <view style="color: #fd7878;margin-top: 20rpx;">请检查文件表头及文件后缀是否为xlsx</view>
    </view>

    <view wx:if="{{state == 4}}">
      <view style="width: 50rpx;height: 50rpx;margin: 50rpx auto 40rpx;"><image style="width: 100%;height: 100%;" src="/images/chenggong.png"></image></view>
      <view style="color: black;font-style: 24rpx;">文件解析成功，点击下方按钮导入</view>
      <view style="color: #6a6a6a;margin-top: 20rpx;">客户状态请返回客户列表查看</view>
    </view>

  </view>

  <view class="{{path?'daoru1':'daoru'}}" bindtap="daoru">点击导入系统</view>

  <view wx:if="{{state == 2 && path}}">
    <view class="jindutiao">
      <view style="width: 35rpx;height: 35rpx;margin-right: 15rpx;"><image style="width: 100%;height: 100%;" src="/images/qubiezhen.png"></image></view>
      <view>{{filename}}</view>
      <view>(导入中...)</view>
    </view>
    <view class="tiao1" style="width: {{dtwidth}}rpx;"></view>
  </view>

  <view wx:if="{{state == 4}}">
    <view class="jindutiao">
      <view style="width: 35rpx;height: 35rpx;margin-right: 15rpx;"><image style="width: 100%;height: 100%;" src="/images/qubiezhen.png"></image></view>
      <view>{{filename}}</view>
      <view>(导入成功)</view>
    </view>
    <view class="tiao2"></view>
  </view>


  <view class="piliang"><image style="width: 28rpx;height: 28rpx;margin-right: 10rpx;" src="/images/yuanwenhao.png"></image> 批量上传教程</view>

  <!-- 教程图图片 -->
  <view class="jcimg">
    <view class="img img1"><image style="width: 100%;height: 100%;" src="/images/jc2.jpg"></image></view>
    <view class="img img2"><image style="width: 100%;height: 100%;" src="/images/jc1.jpg"></image></view>
  </view>

</view>

2、css

page {
  background-color: white;
}
.jrecommend-bg {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 750rpx;
  height: 626rpx;
}

.jrecommend-top {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 98rpx;
  width: 267rpx;
  height: 353rpx;
  margin-left: 108rpx;
}

.jrecommend {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 702rpx;
  padding: 0 22rpx;
  margin: 38rpx auto 0;
  background: white;
  border: 1px solid #e7e7e7;
  border-radius: 10rpx;
}

.jrecommend.mt400 {
  margin-top: 400rpx;
  min-height: 1000rpx;
}
.jrecommend .tatle{
  position: relative;
  margin: 80rpx auto 0;
  font-weight: 700;
  font-size: 28rpx;
  padding: 0 0 0 20rpx;
}
.jrecommend .xlsx{
  width: 93%;
  height: 280rpx;
  border: dashed 1rpx #aaa;
  position: relative;
  margin: 25rpx auto;
  text-align: center;
}


.jrecommend .daoru{
  position: relative;
  margin: 0 auto;
  width: 93%;
  height: 80rpx;
  background: rgb(178,180,183);
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 7rpx;
  line-height: 80rpx;
}
.jrecommend .daoru1{
  background: rgb(13,77,227);
  position: relative;
  margin: 0 auto;
  width: 93%;
  height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  border-radius: 7rpx;
  line-height: 80rpx;
}
.jrecommend .jindutiao{
  display: flex;
  align-items: center;
  color: #6a6a6a;
  margin: 20rpx 0 10rpx 15rpx;
}
.jrecommend .tiao1{
  
  height: 7rpx;
  background: rgb(255,124,0);
  margin-left: 65rpx;
}

.jrecommend .tiao2{
  width: 570rpx;
  height: 7rpx;
  background: rgb(0,110,255);
  margin-left: 65rpx;
}


.jrecommend .piliang{
 display: flex;
 align-items: center; 
 position: relative;
 margin: 70rpx auto 35rpx;
  font-weight: 700;
  font-size: 24rpx;
  padding: 0 0 0 20rpx;
}
.jrecommend .jcimg{
  display: flex;
  justify-content: space-between;
  margin-bottom: 50rpx;
}

.jrecommend .jcimg .img{
  width: 310rpx;
  height: 600rpx;
  border: 1rpx solid #aaa;
}

3、js ----- js这里得说明一下，那个url头部是从app.js中调过来的再拼接上后端给的接收接口，

因为我这里测试和正式总是来回切换、也可以自己直接就写全称

url: https//www.xxx.cn.partner/customer_import/informationImport',

怎么方便怎么来。

然后前端这里还用indexof判断了一下是不是xls文件，也可以提交后交给后端判断。

token的话记得在全局中 wx.setStorageSync('token', token)一下，或者全局变量中保存了，调过来

// pages/recommends/recommends.js
var api = getApp().api
var img = getApp().img
var Url = getApp().baseUrl
Page({

  data: {
    imgUrl:img,
    baseUrl:Url,
    filename:'', //文件名字
    path:'' ,//文件路径
    state:1 ,  //文件状态
    wenzi:0,   //开始
    
    dtwidth:'400',
  },
  getList(){
    console.log('getlist........');
  },
  xuanze(){
    console.log('点击了选择。。。。。。');

    const that=this
    that.setData({
      state:1,
      filename:0
    })
    wx.chooseMessageFile({
      count: 1,
      type: 'file',
      success(res) {
        console.log(res.tempFiles[0])
        const path = res.tempFiles[0].path
        let size = res.tempFiles[0].size;
        let filename = res.tempFiles[0].name;
        
        // &&filename.indexOf(".xlsx") == -1
        if (filename.indexOf(".xls") == -1) { //限制文件类型
          console.log('1111111111');
          wx.showModal({
            title: '提示',
            content: '文件类型必须为excel！(.xls)',
            confirmColor: '#0177ff',
            confirmText: '确定',
            success: function (res) {},
          })
        } else {

          wx.showModal({
            title: '提示',
            content: '确定上传' + filename + "?",
            confirmColor: '#0177ff',
            confirmText: '确定',
            success: function (res) {
              console.log(res);
              //点击确定还是取消
              if (res.confirm) {
                that.setData({
                  filename:filename,
                  path:path,
                  wenzi:1
                })
                
              }
            }
          })
        }

      }
    })

  },
  daoru(){
    let that= this
    let url = this.data.baseUrl
    // wx.showLoading({
    //   title: "上传中",
    // });
    this.setData({
      state:2,
    })
    console.log(url+'/partner/customer_import/informationImport');
    wx.uploadFile({
      url: url+'/partner/customer_import/informationImport', //测试 上传的路径   
      
      // url: 'https://top.1615.cn/partner/customer_import/informationImport', //正式 上传的路径   

      header: {
        "Content-Type": "application/json",
        'token': wx.getStorageSync("token"),
      },
      filePath:that.data.path,
      name: 'file', //后台获取的凭据
      success(res) {
        // wx.hideLoading()
        console.log(res);
        if (res.statusCode == 500) {
          wx.showToast({
            title: '文件异常',
            icon: 'none',
            duration: 2000
          })
          that.setData({
            state:3,
            path:0
          })
        }else{

          let data = JSON.parse(res.data)       
          console.log(data);
          if (data.statusCode == 500) {
            wx.showToast({
              title: '文件解析失败',
              icon: 'none',
              duration: 2000
            })
            that.setData({
              state:3,
              path:0
            })
          }else if (data.statusCode == 200){
            console.log('4444444444');
            wx.showToast({
              title: data.data,
              icon: 'success',
              duration: 2000
            })
            that.setData({
              state:4,
              path:0,
              wenzi:''
              // filename:''
            })
          }else{
            console.log('333333333');
            wx.showToast({
              title: data.data,
              icon: 'none',
              duration: 2000
            })
            that.setData({
              state:3,
              path:0
            })
          }
        }
        
        
        // let resp = JSON.parse(res.data)
        
      },
      fail(err) {
        console.log(err);
        wx.hideLoading();
        wx.showModal({
          title: '提示',
          // content: "文件上传失败" + err.errMsg,
          content: "文件上传失败:未找到文件,请选择正确文件。",

          showCancel: false, //是否显示取消按钮
          success: function (result) {
            that.setData({
              path:'',
              state:3
            })
          }
        })
      }
    })
  },
 
})