uniapp微信小程序图片文件上传及获取文件对象等_uniapp微信小程序上传文件

1.前言-吐槽

        这几天遇到一个需求，在uniapp小程序中上传图片文件，但是要用base64格式数据，但是在csdn和百度上都没找到相应方法，千篇一律都是使用uni.chooseImage()得到文件临时路径，再通过uni.uploadFile()将路径放到files参数中进行formdata格式上传，这明显和想要的效果不一样。于是在网络海洋遨游了几天后终于在微信小程序官方文档找到了解决方法--调用getFileSystemManager().readFileSync()方法获取到文件 ArrayBuffer 二进制或base64等格式数据。

2.使用方法及代码

官方文档说明：

     1.readFileSync()方法的第一个参数是一个文件路径，我们可以通过uni.chooseImage()获取文件的临时路径：

<template>
	<view class="content">
		<view class="text-area">
			<button @click="chooseImage">选择文件</button>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		methods: {
			// 选择文件获取文件临时路径
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log('这是选择文件的临时路径\n', JSON.stringify(res.tempFilePaths));
					}
				});
 
			}
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
 
	.text-area {
		display: flex;
		justify-content: center;
	}
</style>

2.将得到的路径放入到 FileSystemManager.readFileSync()作为第一个参数,第二个参数可选，不填则默认返回 ArrayBuffer 格式数据，为了得到base64以便进行格式转换，我们这里将填入"base64"作为第二个参数:

<template>
	<view class="content">
		<view class="text-area">
			<button @click="chooseImage">选择文件</button>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 选择文件获取文件临时路径
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log('这是选择文件的临时路径\n', JSON.stringify(res.tempFilePaths[0]));
						this.getBase64(res.tempFilePaths[0])
 
					}
				});
			},
			// 传入临时路径,获取到文件的base64格式数据.
			getBase64(fileTemppath) {
				let base64 = uni.getFileSystemManager().readFileSync(fileTemppath, 'base64')
				console.log("这是base64数据\n", base64);
 
			}
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
 
	.text-area {
		display: flex;
		justify-content: center;
	}
</style>

3.通过转换得到更多文件格式数据：

可以看我的这一篇文章了解，这里就不多赘述。

3.额外一提-在uniapp中通过formData格式进行上传：

        在uniapp中进行formdat格式上传必须通过调用uni.uploadFile(OBJECT)方法：

<template>
	<view class="content">
		<view class="text-area">
			<button @click="chooseImage">选择文件</button>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 选择文件获取文件临时路径
			chooseImage() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log('这是选择文件的临时路径\n', JSON.stringify(res.tempFilePaths[0]));
						this.uploadImage(res.tempFilePaths[0])
					}
				});
			},
			// 上传
			uploadImage(filePath) {
				uni.uploadFile({
					url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
					filePath: filePath, //这里的参数可以填filePath和files，需要看文件传入的耽搁还是多个
					name: 'file', //上传图片文件中formData对应的key值
					formData: {
						'user': 'test' //这里可以填写额外的forData数据
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
					}
				});
			}
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
 
	.text-area {
		display: flex;
		justify-content: center;
	}
</style>

4.结语-吐槽

        在这里奉劝大家一句，要先想好产品的侧重端，要是想做小程序就直接尽量用原生好了，不然遇到bug半天解决不了，readFileSync()方法在uniapp的官方文档中根本一个字都找不到，也没有引导去微信文档查找，勾石。