首页 > 其他分享 >uniapp中如何使用uni.canvasToTempFilePath方法上传Canvas内容为图片,并理解其工作原理

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

时间:2024-08-13 11:52:45浏览次数:15  
标签:uniapp Canvas 请求 文件 响应 canvasToTempFilePath uni 上传

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请求的细节,只需提供必要的参数并处理响应即可。

标签:uniapp,Canvas,请求,文件,响应,canvasToTempFilePath,uni,上传
From: https://blog.csdn.net/weixin_51480428/article/details/141156047

相关文章