uniapp上传图片到服务器数据库获得图片地址

在开发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对象作为请求的数据