【uniapp-上传图片单个图片和多个图片到数据库】

单个图片上传功能

思路，首先选择图片的功能是uni.chooseImage（{}）

		uni.chooseImage({
				count: 9, //图片的数量，默认是9
				success: (res) => {
				//在选择图片后，我们会在res.tempFilePaths以数组的形式里面获取我们的图片路径
					console.log(res.tempFilePaths);
				}
		})

这里获取的链接只是本地图片的一个地址，但是我们需要的是将图片这一个文件上传到数据库，这里我们需要用到uni.uploadFile（{}）

		uni.uploadFile({
				url: 'http://192.168.1.120:8080/ikun/common/upload',
				filePath: 这里需要我们的图片路径,
				success: (res) => {
					// 如果上传成功的话,我们可以看到后端返回的一个在线的链接(不知道的可以跟后端沟通一下)
					console.log(res);
				}
					
		})

接下来我们将 uni.uploadFile（{}） 放在 uni.chooseImage（{}） 的 success：（）{} 中

uni.chooseImage({
			count: 9, //图片的数量，默认是9
			success: (res) => {
				//在选择图片后，我们会在res.tempFilePaths以数组的形式里面获取我们的图片路径
				console.log(res.tempFilePaths);
				
				uni.uploadFile({
					url: 'http://192.168.1.120:8080/ikun/common/upload',
					filePath: res.tempFilePaths[0],  //我们将选择图片后获取的路径放到这里，要记住 选择图片后获取的路径 是数组的形式
					success: (res) => {
						// 如果上传成功的话,我们可以看到后端返回的一个在线的链接(不知道的可以跟后端沟通一下
						console.log(res);
					}
				})
				
			}
})

但是这个数据我们不好获取，我们需要进行转换成对象，这里使用JSON.parse()

console.log( JSON.parse(res.data).data);

我们将获取来的值复制给某一个变量，在 **uni.request({})**中传参过去，就完成了向后端上传图片的功能了

多个图片上传功能

但是我们只会单个图片是不够的，我们还需要学会多个图片上传，实现多个图片上传，我们只需要在上传的代码加上一个for循环就好了

我们在uni.chooseImage 的 success 中先准备一个for循环，在 for循环 中放入 uni.uploadFile

uni.chooseImage({
			count: 9, //图片的数量，默认是9
			success: (res) => {
				//在选择图片后，我们会在res.tempFilePaths以数组的形式里面获取我们的图片路径
				console.log(res.tempFilePaths);
				
				uni.uploadFile({
					url: 'http://192.168.1.120:8080/ikun/common/upload',
					filePath: res.tempFilePaths[i],  //我们将选择图片后获取的路径放到这里，要记住 选择图片后获取的路径 是数组的形式
					success: (res) => {
						// 如果上传成功的话,我们可以看到后端返回的一个在线的链接(不知道的可以跟后端沟通一下
						console.log(res);
					}
				})
				
			}
})

看，你已经拿到了多个图片的链接了

但是我们拿到的都是单个的链接，我们需要将他们放在同一个数组里面，我们需要在data里面准备一个数组类型的变量，然后在 uni.uploadFile 的 success 中将单个的链接都放在这个数组类型的变量汇总

data() {
	return {
		morePic: []
	}
},
uni.uploadFile({
	url: 'http://192.168.1.120:8080/ikun/common/upload',
	filePath: res.tempFilePaths[0],  //我们将选择图片后获取的路径放到这里，要记住 选择图片后获取的路径 是数组的形式
	success: (res) => {
	// 如果上传成功的话,我们可以看到后端返回的一个在线的链接(不知道的可以跟后端沟通一下）
	this.morePic.push(JSON.parse(res.data).data)
	}	
})

我们单独准备一个console.log(）来答应一下我们的morePic看一下效果

showMorePic(){
	console.dir(this.morePic.join('间隔'));
}

看，你成功的拿到了

以上就是上传单个图片和多个图片的教程，希望你学会了！！！