目录

精简版总结

示例

容易踩的坑

1、页面刷新问题

2、extension问题


精简版总结

单文件

wx.chooseMessageFile({
	count: 1,//限制选择的文件数量
	type: 'file',//非图片和视频的文件,不选默认为all
  //type:'video',//视频
  //type:'image',//图片
	success (res) {
	 const tempFilePaths = res.tempFiles
		 uni.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.tempFiles
		 uni.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',//非图片和视频的文件,不选默认为all
    extension:['xlsx','.xlsx'],//此处限制文件类型
	success (res) {
	 const tempFilePaths = res.tempFiles
	 console.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',//非图片和视频的文件,不选默认为all
	success (res) {
	 const tempFilePaths = res.tempFiles
	 console.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和安卓如下图所示。

ios没有限制
安卓没有限制

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

ios有限制
安卓有限制

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

ios限制错误

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐