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

news2024/11/15 7:26:19

项目场景：

在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].path
				let name = res.tempFiles[0].name
				uni.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) {
		    // 上传完成需要更新 fileList
	        const { fileList = [] } = this.data;
			fileList.push({ ...file, url: res.data });
			this.setData({ fileList });
	    },
    });
},