uniapp中如何使用uni.canvasToTempFilePath方法上传Canvas内容为图片，并理解其工作原理

1. 主函数

      uni.canvasToTempFilePath({
				canvasId: 'canvasid',
				fileType: 'png',
				quality: 1, //图片质量
				success(res) {
					uni.uploadFile({
						url: that.baseUrl + '/file/upload', //后端接口地址
						name: 'file', //必填 , 此为类型名称
						filePath: res.tempFilePath, //电子签名图片路径
						header: {
							Authorization: 'Bearer ' + that.token
						},
						success: (res) => {
							console.log(res, 'ssssssssssssss');
							//上传成功后逻辑
							uni.showToast({
								title: '签名成功!'
							});
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								title: '签名失败!'
							});
						}
					});
				}
			});

2. uni.canvasToTempFilePath到底做了什么，以及同等类型的 wx.chooseMedia和uni.chooseImage

当我们成功调用上述函数的时候，成功的回调函数中会返回文件的临时路径，我们向后端发起请求即可，下面我们看看uniapp在背后做了什么工作。

2.1 准备HTTP请求

uniapp 会构建一个 multipart/form-data 类型的 HTTP 请求，这是上传文件的常用格式。

2.2 文件封装

将指定的 filePath 中的文件内容读取出来，并将其封装成一个适合在HTTP请求中传输的格式。这通常涉及到创建一个或多个 Blob 或 File 对象。

2.3 发送请求

使用 XMLHttpRequest 或 Fetch API（取决于平台和uniapp的具体实现），uniapp会将构建好的请求发送到指定的URL（即你的服务器端点）。

2.4 处理响应

一旦服务器处理完毕并返回响应，uniapp会解析这个响应，并根据返回的数据调用 success 或 fail 回调函数。

2.5 其实现猜测

1.读取本地文件：

当你传递 filePath 到 uni.uploadFile 方法时，uniapp会读取本地文件系统中的这个文件。

2.构建表单数据：

uniapp会创建一个表单数据对象（form data），这个对象可以包含多个键值对，其中键是表单字段的名称，值是文件内容或者是普通的表单数据。

3.设置请求头部：

uniapp会根据需要设置适当的请求头部，比如 Content-Type 会被设置为 multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW（这里的边界值是随机生成的，用于分隔表单中的不同部分）。

4.上传文件：

uniapp会发送一个包含文件数据的POST请求到服务器。请求体（body）包含了文件数据和其他可能的表单字段。

5.进度反馈：

如果设置了 onProgressUpdate 回调函数，uniapp会在上传过程中定期调用这个函数，提供上传进度信息。

6.处理服务器响应：

当服务器响应请求时，uniapp会解析响应体（通常是JSON或文本格式），并根据响应状态调用 success 或 fail 回调函数。

7.错误处理：

如果在请求过程中发生错误（比如网络问题或服务器错误），uniapp会捕获这些错误并调用 fail 回调函数。

总结

uniapp通过封装复杂的网络请求和文件处理逻辑，使得开发者能够通过简单的API调用实现文件上传功能。开发者不需要手动处理HTTP请求的细节，只需提供必要的参数并处理响应即可。