uni-app 手机通过uni.chooseImage获取到的图片地址怎么转成blob格式

需求：将手机上获取的图片地址上传到百度智能云

在uni-app中，通过uni.chooseImage获取到的图片地址通常是本地文件路径或者临时文件路径。要将这些路径转换成Blob格式，你可以使用小程序的wx.getFileSystemManager（在H5端需要使用其他方式，例如通过FileReader API）。以下是一个在小程序端（包括微信小程序、支付宝小程序等）的实现示例：

小程序端实现代码

1. 获取图片并读取为Blob

uni.chooseImage({
    count: 1, // 选择图片的数量
    success: function (res) {
        const tempFilePath = res.tempFilePaths[0]; // 获取到的图片路径
        const fs = wx.getFileSystemManager(); // 获取文件系统管理器

        // 读取文件
        fs.readFile({
            filePath: tempFilePath,
            encoding: 'binary', // 以二进制格式读取
            success: function (result) {
                const arrayBuffer = result.data; // 读取到的文件数据
                const blob = new Blob([arrayBuffer], { type: 'image/png' }); // 假设图片是png格式，根据实际情况修改

                // 在这里你可以使用Blob对象，例如上传或者显示
                console.log(blob);
            },
            fail: function (err) {
                console.error('读取文件失败', err);
            }
        });
    },
    fail: function (err) {
        console.error('选择图片失败', err);
    }
});

注意事项

• 文件类型：在创建Blob对象时，type属性应该根据实际的图片类型来设置，比如'image/jpeg'、'image/png'等。
• 错误处理：在实际应用中，应该增加更多的错误处理逻辑，确保在文件读取失败时能够给用户友好的提示。
• H5端实现：在H5端，由于不支持wx.getFileSystemManager，你可以使用FileReader API来读取文件并转换成Blob。以下是一个简单的H5端示例：

function fileToBlob(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = function (e) {
            const arrayBuffer = e.target.result;
            const blob = new Blob([arrayBuffer], { type: file.type });
            resolve(blob);
        };
        reader.onerror = function (err) {
            reject(err);
        };
        reader.readAsArrayBuffer(file);
    });
}

// 假设你有一个文件输入元素
document.getElementById('fileInput').addEventListener('change', async function (e) {
    const file = e.target.files[0];
    const blob = await fileToBlob(file);
    console.log(blob);
});

上述代码展示了如何在H5端将文件输入元素选中的文件转换成Blob。在uni-app的H5端，你可以根据实际需求调整这段代码。