uniapp中uni-file-picker文件上传组件的使用

        当使用该组件时，要指定文件要上传到的地方，否则直接使用该组件上传文件是不生效的，uni-file-picker组件有五个事件，分别是@select，@progress，@success，@fail，@delete分别在选择文件，文件上传中，文件上传成功，文件上传失败，文件从列表移除时触发。

// 获取上传状态
select(e){
	console.log('选择文件：',e)
},
// 获取上传进度
progress(e){
	console.log('上传进度：',e)
},		
// 上传成功
success(e){
	console.log('上传成功')
},
// 上传失败
fail(e){
	console.log('上传失败：',e)
}

        使用@select可以实现在选择文件的时候触发的函数，例如：

<uni-file-picker 
	v-model="formData.files"
	@select="uploadImages"
>
</uni-file-picker>

uploadImages(e){
	console.log("e=",e)
	this.tempFilePath = e.tempFilePaths[0]
}

         可以通过调用uploadImages函数获得的参数e,来得到你选择文件的地址等信息，主要用到的就是tempFilePaths这个文件地址。

        根据获取到的这个文件地址就可以使用uniapp文件上传API（uni.uploadFile）将你选择的文件上传到文件要保存的服务器，根据服务器接口返回给你的数据选择需要的内容保存在form表单的数据中。

uploadImages(e){
	console.log("e=",e)
	this.tempFilePath = e.tempFilePaths[0]
	if(this.tempFilePath){
		const token = getToken('appToken')
		uni.uploadFile({
			url: getFileUrl('/file/upload'), 
			filePath: this.tempFilePath, 
			name: 'file',
			header: {
				Authorization: token
	        },
			success(uploadFileRes) {
				console.log("上传成功的处理...", JSON.parse(uploadFileRes.data));
				let data = JSON.parse(uploadFileRes.data)
				let imageData = {
					name: data.data.name,
					url: data.data.url
				}
				this.formData.files = []
				this.formData.files.push(imageData)
			}			
		})
	}			
},