精简版总结

单文件

wx.chooseMessageFile({count: 1,//限制选择的文件数量type: 'file',//非图片和视频的文件,不选默认为all//type:'video',//视频//type:'image',//图片success (res) {const tempFilePaths = res.tempFilesuni.uploadFile({url: 'https://....', filePath: tempFilePaths[0].path,//选择单个路径name: 'file',//后端需要拿到这个Key来获取二进制文件内容header:{'X-Token':'Bearer ' + store.state.app.token},formData:{'month':that.date},success: (uploadFileRes) => {//接口返回的数据console.log(uploadFileRes.data);//接口返回的状态码console.log(uploadFileRes.status);}});}
})

多个文件

wx.chooseMessageFile({count: 10,//限制选择的文件数量type: 'file',//非图片和视频的文件,不选默认为all//type:'video',//视频//type:'image',//图片success (res) {const tempFilePaths = res.tempFilesuni.uploadFile({url: 'https://....', files:tempFliePaths,//接受的是数组header:{'X-Token':'Bearer ' + store.state.app.token},formData:{'month':that.date},success: (uploadFileRes) => {//接口返回的数据console.log(uploadFileRes.data);//接口返回的状态码console.log(uploadFileRes.status);}});}
})

PS：files和filePath/name只能二选一组

示例

此处用xlsx文件作实例，选择聊天记录中的xlsx文件上传到指定接口中。

let that=this//保留vue实例
wx.chooseMessageFile({count: 1,//限制选择的文件数量type: 'file',//非图片和视频的文件,不选默认为allextension:['xlsx','.xlsx'],//此处限制文件类型success (res) {const tempFilePaths = res.tempFilesconsole.log('临时路径',tempFilePaths)uni.uploadFile({url: 'https://....', filePath: tempFilePaths[0].path,name: 'file',header:{'X-Token':'Bearer ' + store.state.app.token},formData:{'month':that.date},success: (uploadFileRes) => {//接口返回的数据console.log(uploadFileRes.data);//接口返回的状态码console.log(uploadFileRes.status);}});}
})

因为某些微信版本extension可能不生效，或者又想要对提交的文件名做校验，建议参考我下面的代码。

let that=this//保留vue实例
wx.chooseMessageFile({count: 1,//限制选择的文件数量type: 'file',//非图片和视频的文件,不选默认为allsuccess (res) {const tempFilePaths = res.tempFilesconsole.log('临时路径',tempFilePaths)let filename = res.tempFiles[0].name//客制化判断文件名,判断是不是xlsx文件,仅为参考,可自行变化if(filename.lastIndexOf('.xlsx')==filename.length-5){uni.uploadFile({url: 'https://....', filePath: tempFilePaths[0].path,name: 'file',header:{'X-Token':'Bearer ' + store.state.app.token},formData:{'month':that.date},success: (uploadFileRes) => {//接口返回的数据console.log(uploadFileRes.data);//接口返回的状态码console.log(uploadFileRes.status);}});}else{//客制化提示文件类型错误uni.showToast({title: '请选择xlsx文件',icon:'error',duration: 2000});}}
})

容易踩的坑

1、页面刷新问题

调用chooseMessageFile会离开页面，再次返回时，会触发每次加载进来的生命周期，如uniapp的onShow，如果onShow对数据进行过处理。则uni.uploadFile()方法调用时，数据已经是新数据。如代码中的that.date。

2、extension问题

  extension:['xlsx','.xlsx'],//此处限制文件类型

大家可能发现，为什么这里写了两种，是因为ios的文件扩展名管理中没有一点“.”，如果不做兼容，则Ios端小程序会出错。

当没有限制过滤时，ios和安卓如下图所示。

当有正确限制时，即".xlsx"和"xlsx"，如下图所示。

当限制错误，没有适配ios时，即没有"xlsx"

可以看见什么都没有了，如果安卓没有适配".xlsx"，也应该类似，这里没有作测试。

如果有更多的坑，欢迎评论补充。

uniapp微信小程序选择聊天记录文件上传相关推荐

微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
微信小程序开发之——文件上传
一概述将录像的结果传递给服务器,服务端提供的接口文档为: 字段名称字段类型字段说明必填项示例 token String token 是服务器下发的token(header) file F ...
【微信小程序】大文件上传
微信小程序云开发-批量上传文件到云储存空间
微信小程序开发自己最近在玩微信小程序,准备记录一些自己遇到的,网络上没有对应教程(也许是自己没找到),或者是教程比较少的问题,然后给出自己的解决方案目录微信小程序开发问题一.云储存是什么? ...
微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件一.前言目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
小程序上传音频失败_微信小程序实现录音后上传文件方法详细
本篇文章讲述了微信小程序实现录音后上传文件方法,大家对微信小程序实现录音后上传文件方法不了解的话或者对微信小程序实现录音后上传文件方法感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧 ...
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...

uniapp微信小程序选择聊天记录文件上传

精简版总结

示例

容易踩的坑

1、页面刷新问题

2、extension问题

uniapp微信小程序选择聊天记录文件上传相关推荐

最新文章

热门文章

uniapp微信小程序 选择聊天记录文件上传

精简版总结

示例

容易踩的坑

1、页面刷新问题

2、extension问题

uniapp微信小程序 选择聊天记录文件上传相关推荐

最新文章

热门文章

uniapp微信小程序选择聊天记录文件上传

uniapp微信小程序选择聊天记录文件上传相关推荐