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