wx.chooseMessageFile在pc端微信小程序失效解决方法

本文主要是介绍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 });},});
},