使用uniapp的uni.uploadFile(OBJECT)方法向后台node.js一次传多张图片

使用uniapp的uni.uploadFile(OBJECT)方法向后台node.js一次传多张图片

问题分析

（1）在学习了uniapp之后，我会一次传一张图片到后台去。
【很多教学视频都会教的，要是不会建议先看教学视频】
一般是利用uniapp的 uni.chooseImage(OBJECT) 方法获取照片的本地地址，在利用uni.uploadFile(OBJECT)方法传到后台，用的是filePath 这个参数。

（2）但是，在我写项目的时候，需要将一次传两张照片到后台，看uniapp的开发文档，不难发现需要使用files参数，这是一个Array类型的参数。但是，在将uni.chooseImage(OBJECT)会传的res.tempFiles给files进行发送到后台会报错，报了一个 【无效文件名 】 的错误。百度了也没找到合适的解决方法。

（3）最后找到了一个好的解决方法的做法是：将es.tempFiles重新封装成一个新的Object，用for循环一个一个封装，然后添加到数组fileList中，最后将这个数组给参数files，发送到后台。到此问题解决。

要是上面的文字枯燥，没看懂，可以结合以下关键代码，结合注释。

参考博客：https://blog.csdn.net/Shiny_boy_/article/details/123715437?spm=1001.2014.3001.5506

一、uniapp部分

<script>
	export default {
		data() {
			return {
				//imgA、imgB是我用到的两个变量，不需要管
				imgA: "../../static/img/face/face06.png",
				imgB: "../../static/img/face/face06.png",
				// !!! 就是将这个数组传到后端
				fileList: [],
				//这是我回传的数据，不用管
				ans: 0 
			}
		},
		methods: {
			chooseImages() {
			    //这句代码是根据我项目逻辑写的，每次调用该函数就重置这个数组，不用管
				this.fileList = [];
				//uni.chooseImage的参数可以常考uniapp的API文档
				uni.chooseImage({
					count: 2,	//照片的数量
					success: (res) => {
					    //选取的照片，传回来的数据，我这里包含了两个照片
						const files = res.tempFiles;
						//打印这个数据，可以看下该数据的结构是什么样的	
						console.log(files)
						
						// !!! 将res.tempFiles的数据重新构造成一个Object并加到数组fileList中去
						// !!! 我也不知道为什么要这么做，但是就是可以
						for (let i = 0; i < files.length; i++) {
							let obj = new Object();
							obj.name = 'photo' + i;
							obj.uri = files[i].path;
							this.fileList.push(obj);
						}
						
						// 使用uni.uploadFile传图片到后台，具体参考API文档
						// 以下代码都是很普通的，关键是上面的for循环
						uni.uploadFile({
							// url 是后端的接口，改成自己的就好
							url: 'http://localhost:7001/aifacecompare',
							files: this.fileList,
							success: (res) => {
								console.log(res)
								var obj = JSON.parse(res.data)
								console.log(obj)
								this.$nextTick(() => {
									this.ans = obj.Score;
								})
							},
							fail(res) {
								console.log(res)								
							}
						})
					}
				})
			}
		}
	}
</script>

二、node.js部分代码，仅供参考、
主要看下怎么获取后端传过来的数据。
其他代码是腾讯AI开发平台的代码，不需要理解。

async aifacecompare() {
		console.log("aifacecompare")
		//获取前端发送的图片
		var data2 = this.ctx.request.files
		console.log(data2[0],111111)
		console.log(data2[1],222222)
		
		//将图片转码
		var imgbufferA = fs.readFileSync(data2[0].filepath)
		var base64imgA = imgbufferA.toString("base64")
		var imgbufferB = fs.readFileSync(data2[1].filepath)
		var base64imgB = imgbufferB.toString("base64")

		//发送给ai平台
		const IaiClient = tencentcloud.iai.v20200303.Client;

		const clientConfig = {
			credential: {
				secretId: "AKIDOcaHhrkMiqhHZaKnzua090bvyjDRO4SX",
				secretKey: "pNddMoywd3C4fz2oJXVBajbCWaNt86nG",
			},
			region: "ap-guangzhou",
			profile: {
				httpProfile: {
					endpoint: "iai.tencentcloudapi.com",
				},
			},
		};

		const client = new IaiClient(clientConfig);
		const params = {
			"ImageA": base64imgA,
			"ImageB": base64imgB,
			"FaceModelVersion": "3.0",
			"QualityControl": 0,
			"NeedRotateDetection": 0
		};
		
		// 将处理结果回传给前端
		// 我这里调用了腾讯AI开发平台的接口
		// 测试，可以自定义一个返回的值
		// 例：this.ctx.body = "XXX"
		this.ctx.body = await client.CompareFace(params)
	}