本文主要是介绍wx.chooseMessageFile在pc端微信小程序失效解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目场景：
在uniapp上驱动微信开发者工具（下图）
在手机上和微信开发者工具中（图1）都可以上传成功，
打开pc端的微信小程序
在pc端打开小程序时点击上传没反应
问题描述
提示：这里描述项目中遇到的问题：
在pc端打开小程序上传的时候发现点击上传没有反应，通过（ console.log("打印====111") ）打印步骤发现wx.chooseMessageFile方法失效
下面是代码
封装上传代码
//微信 上传文件方法 需要传入3个参数
//count是上传文件的数量
//extension 参数是用来指定文件类型的过滤条件，
//formData是上传文件的数据
export function wx_chooseMessageFile(type, count, extension, formData) {return new Promise((resolve, reject) => {wx.chooseMessageFile({type: type,count: count,extension: extension,// ['.zip', '.docx', '.doc', '.pdf', 'txt', '.csv', // '.xlsx', '.ppt', '.pptx']success: function(res) {console.log("选择的文件是", res);let temp_path = res.tempFiles[0].pathlet name = res.tempFiles[0].nameuni.uploadFile({url: process.env.VUE_APP_BASE_URL + "/file/add_file",filePath: temp_path,name: "file",header: {'system-type': 3,'Authorization': uni.getStorageSync('token') ?"Bearer " + uni.getStorageSync('token') : ''}, formData: formData,success(uploadFileRes) {console.log("打印uploadFileRes", uploadFileRes);if (uploadFileRes.statusCode == 200) {let data_ = JSON.parse(uploadFileRes.data)// 将请求成功的结果返回resolve(data_)} else {uni.showToast({title: uploadFileRes.data.msg,icon: 'none'})}},fail: (err) => {reject(err);}})}})})
}下载与预览代码
wx.chooseMessageFile({...success(res) {const filePath = res.tempFiles[0].path; // 获取上传成功后的文件路径const downloadUrl = 'https://example.com/file.mp4'; // 下载链接const previewUrl = 'https://example.com/image.jpg'; // 预览链接// 下载文件wx.downloadFile({url: downloadUrl,success(res) {const filePath = res.tempFilePath; // 下载成功后的文件路径// 在页面中展示下载链接const downloadLink = document.createElement('a');downloadLink.href = filePath;downloadLink.innerText = '下载文件';document.body.appendChild(downloadLink);}});// 预览文件wx.previewFile({url: previewUrl,success(res) {// 在页面中展示预览链接const previewLink = document.createElement('a');previewLink.href = previewUrl;previewLink.innerText = '预览文件';document.body.appendChild(previewLink);}});}
})原因分析：
提示：这里填写问题的分析：
wx.chooseMessageFile只支持移动端的使用，并不支持pc端，所以在pc端打开微信小程序的时候方法wx.chooseMessageFile会失效
解决方案：
提示：这里填写该问题的具体解决方案：
1：下载第三方库
在wx.chooseMessageFile方法失效的时候有想过用原生的<input type="file"/>后来发现也不行，查后发现是因为uniapp不支持原生，所以只能求助第三方库，发现vant可以，而且vant有专门针对微信小程序开发的库 就是 Vant Weapp 然后 下载这个组件库 下载后将其解压，如下图
2：引入第三方库
在自己的uniapp项目文件中，新建一个文件夹，这个文件夹与pages文件平级（我新建的叫wxcomponents）然后再在里面新建一个文件（我新建的叫vant-weapp）然后将解压后的dist文件放到里面，如下图
3：在pages.json页面中做配置
有两个地方要做配置，但是都是在pages.json页面，如下图：
1：在与pages对象数组平级的地方新加代码
"easycom": {"van-(.*)": "@/wxcomponents/vant-weapp/dist/$1/index"},2：在globalStyle中全局配置引用
"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "加载中","navigationBarBackgroundColor": "#fff","backgroundColor": "#F8F8F8","titleNView": false,"usingComponents": {//这里为方便，全局引入了所有组件，也可以在某个page下单独引用某个组件"van-button": "/wxcomponents/vant-weapp/dist/button/index","van-uploader": "/wxcomponents/vant-weapp/dist/uploader/index"}},3：在页面中引入使用
在页面中引入组件，然后注册组件，这样才能使用
1：引入
import vanUploader from '@/wxcomponents/vant-weapp/dist/uploader/index.js';2：在components里面注册
components: {vanUploader},3：html中使用
<vanUploader :fileList="file_list" bind:after-read="afterRead" />4：上传方法：
afterRead(event) {const { file } = event.detail;// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式wx.uploadFile({url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址filePath: file.url,name: 'file',formData: { user: 'test' },success(res) {// 上传完成需要更新 fileListconst { fileList = [] } = this.data;fileList.push({ ...file, url: res.data });this.setData({ fileList });},});
},5：查看结果
注：
vant-weapp的上传可以解决uniapp运行打包发布的微信小程序中的wx.chooseMessageFile失效的问题。但是对van-uploader 封装上传的话自己封装，这里只做vant-weapp的下载引入与使用。
这篇关于wx.chooseMessageFile在pc端微信小程序失效解决方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
