Catalog

A condensed summary

Example

Easy to step on

1、 Page refresh problem

2、extension problem

A condensed summary

A single file

wx.chooseMessageFile({
	count: 1,// Limit the number of files selected 
	type: 'file',// Files other than pictures and videos , Don't choose to think all
  //type:'video',// video 
  //type:'image',// picture 
	success (res) {
	 const tempFilePaths = res.tempFiles
		 uni.uploadFile({
			url: 'https://....', 
			filePath: tempFilePaths[0].path,// Select a single path 
			name: 'file',// The backend needs to get this Key To get the contents of binary files 
			header:{
				'X-Token':'Bearer ' + store.state.app.token
			},
			formData:{
				'month':that.date
			},
			success: (uploadFileRes) => {
                // The data returned by the interface 
				console.log(uploadFileRes.data);
                // The status code returned by the interface 
				console.log(uploadFileRes.status);
			}
		});
	
	}
})

Multiple files

wx.chooseMessageFile({
	count: 10,// Limit the number of files selected 
	type: 'file',// Files other than pictures and videos , Don't choose to think all
  //type:'video',// video 
  //type:'image',// picture 
	success (res) {
	 const tempFilePaths = res.tempFiles
		 uni.uploadFile({
			url: 'https://....', 
            files:tempFliePaths,// It takes arrays 
			header:{
				'X-Token':'Bearer ' + store.state.app.token
			},
			formData:{
				'month':that.date
			},
			success: (uploadFileRes) => {
                // The data returned by the interface 
				console.log(uploadFileRes.data);
                // The status code returned by the interface 
				console.log(uploadFileRes.status);
			}
		});
	
	}
})

PS：files and filePath/name Only one group can be selected

Example

This is used here xlsx File as an example , Select xlsx Upload the file to the specified interface .

let that=this// Retain vue example 
wx.chooseMessageFile({
	count: 1,// Limit the number of files selected 
	type: 'file',// Files other than pictures and videos , Don't choose to think all
    extension:['xlsx','.xlsx'],// File types are restricted here 
	success (res) {
	 const tempFilePaths = res.tempFiles
	 console.log(' Temporary path ',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) => {
                // The data returned by the interface 
				console.log(uploadFileRes.data);
                // The status code returned by the interface 
				console.log(uploadFileRes.status);
			}
		});
	}
})

Because some wechat versions extension It may not work , Or you want to verify the submitted file name , It is recommended to refer to my code below .

let that=this// Retain vue example 
wx.chooseMessageFile({
	count: 1,// Limit the number of files selected 
	type: 'file',// Files other than pictures and videos , Don't choose to think all
	success (res) {
	 const tempFilePaths = res.tempFiles
	 console.log(' Temporary path ',tempFilePaths)
	 let filename = res.tempFiles[0].name
	 // Customized judgment file name , Judgment is not xlsx file , For reference only , It can be changed by itself 
	 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) => {
                // The data returned by the interface 
				console.log(uploadFileRes.data);
                // The status code returned by the interface 
				console.log(uploadFileRes.status);
			}
		});
		
	 }else{
         // Customized prompt file type error 
		 uni.showToast({
			title: ' Please select xlsx file ',
			icon:'error',
			duration: 2000
		 });
	 }

	}
})

Easy to step on

1、 Page refresh problem

call chooseMessageFile Will leave the page , When you return again , It will trigger the life cycle of each load , Such as uniapp Of onShow, If onShow Processed the data . be uni.uploadFile() Method call , The data is new . As in the code that.date.

2、extension problem

  extension:['xlsx','.xlsx'],// File types are restricted here 

You may find that , Why are there two kinds of , Because ios There is nothing in the file extension management of “.”, If not compatible , be Ios End applet will make mistakes .

When there is no restriction on filtering ,ios And Andrew are shown in the figure below .

  When there are correct restrictions , namely ".xlsx" and "xlsx", As shown in the figure below .

  When limit error , No fit ios when , That is, no "xlsx"

  You can see nothing , If Android doesn't fit ".xlsx", It should be similar , There is no test here .

If there are more pits , Welcome to comment .