Uniapp小程序实现从相册选图/拍照后直接上传

最近在做小程序项目的时候遇到一个需求，就是实现从相册选图/拍照后直接调用后端接口上传，我想如果你此时忽略小程序不是基于浏览器运行的，然后想着怎么样去用向后端发送file格式文件，那真的就是大错特错了... 因为基于浏览器内置的JS环境根本就没有FormData、File等这些class... 看下效果图...

 

首先看下从相册选取图片/拍照的UNI API，这个没啥，直接依据文档调用就好... 

// 从相册选图
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['album'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

// 使用相机
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['camera'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

// 从相册选图/使用相机
uni.chooseImage({
	count: 12, // 最多可以选择的图片张数，默认9
	sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
	sourceType: ['album ','camera'], //album 从相册选图，camera 使用相机
	success: (res) => {
        // TODO SUCCESS
    }
})

通过上述方法，发现通过success中的res，能够获取到图片临时文件的数组tempFilePaths，可以直接通过调用接口的方式，将临时文件交给后端去做处理，由于当时后端不接受这个临时文件，我就又多做一步处理，将临时文件处理为base64，然后再传给他...

简单说下怎么将临时文件转为base64，首先通过uni.getFileSystemManager()拿到文件处理器，因为需要读取文件的方法 ，然后遍历临时文件的数组去依次转换，由于读取文件的方法是异步的，这里需要Promise.all来处理一下，否则你传递给后端的base64数组还会是声明时候的空数组...

Promise.all(
	res.tempFilePaths.map(item => {
		return new Promise((resolve, reject) => {
			fs.readFile({
				filePath: item,
				encoding: 'base64',
				success: res => {
					resolve('data:image/png;base64,' + res
						.data)
				},
				fail: err => {
					reject(err)
				}
			})
		})
	})
).then(results => { // 在这里处理所有文件的内容
	that.uploadLivePic(results)
})

 到这里成功完成图片的上传，感觉对自己有帮助的小伙伴，可以留个star...