在开发uniapp应用时，我们经常需要将用户上传的图片发送到服务器，这个过程可能涉及到图片的选择、压缩、格式转换等一系列操作，本文将详细介绍如何在uniapp中实现图片上传到服务器的功能。
选择图片
在uniapp中，我们可以使用uni.chooseImage()方法来选择图片，这个方法会返回一个包含图片文件信息的数组，我们可以从这个数组中获取到图片的临时路径。
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: function (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
}
});
压缩图片
由于用户可能会上传一些较大的图片，我们需要在上传前对图片进行压缩，以减少网络传输的负担，在uniapp中，我们可以使用uni.compressImage()方法来压缩图片。
uni.compressImage({
src: tempFilePaths[0], // 图片路径
quality: 80, // 压缩质量
success: function (res) {
// 压缩后的图片路径
const compressedFilePath = res.tempFilePath;
}
});
转换图片格式
在某些情况下，我们可能需要将图片转换为特定的格式，例如将jpg格式的图片转换为png格式，在uniapp中，我们可以使用uni.canvasToTempFilePath()方法来实现这个功能。
uni.canvasToTempFilePath({
canvasId: 'myCanvas', // canvas的id
success: function (res) {
// 转换后的图片路径
const filePath = res.tempFilePath;
}
});
上传图片到服务器
在完成以上步骤后，我们就可以将图片上传到服务器了，在uniapp中，我们可以使用uni.uploadFile()方法来上传文件。
uni.uploadFile({
url: 'https://www.example.com/upload', // 服务器地址
filePath: compressedFilePath, // 文件路径
name: 'file', // 参数名，和后端约定好的名称一致
formData: {
'user': 'test' // 其他要上传的参数，和后端约定好的名称一致
},
success: function (res) {
// 上传成功时执行的回调函数
}
});
以上就是在uniapp中实现图片上传到服务器的整个过程，需要注意的是，由于安全限制，我们不能直接将用户选择的图片作为formData的值上传，而需要先将图片转换为base64格式，然后再将base64字符串作为formData的值上传，我们还需要在服务器端处理这些数据，包括解析base64字符串、保存图片等操作。
相关问题与解答
1、问题：在uniapp中，如何将图片转换为base64格式？
解答：在uniapp中，我们可以使用uni.getFileSystemManager().readFileSync()方法来读取文件内容，然后使用btoa()方法将文件内容转换为base64格式，但是需要注意的是，由于安全限制，我们不能直接将用户选择的图片作为readFileSync()的参数，而需要先将图片转换为临时文件，然后再读取临时文件的内容，以下是具体的代码：
const fs = uni.getFileSystemManager(); const base64 = btoa(fs.readFileSync(tempFilePaths[0], 'base64')); // 将图片转换为base64格式
2、问题：在uniapp中，如何将base64字符串作为formData的值上传？
解答：在uniapp中，我们可以使用uni.request()方法来发送请求，由于request()方法不支持直接传递base64字符串，我们需要先将base64字符串转换为Blob对象，然后再将Blob对象作为请求的数据，以下是具体的代码：
const base64Data = 'data:image/jpeg;base64,' + base64; // 将base64字符串转换为data URL格式的字符串
const response = await uni.request({url: 'https://www.example.com/upload', method: 'POST', data: {file: base64Data}}); // 发送请求，将Blob对象作为请求的数据
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/252727.html
微信扫一扫 