[uniapp develops WeChat applets] Upload pictures, compress pictures, and convert pictures to base64

Scenario: The user changes the avatar, and the backend needs me to pass the base64 data when the interface is adjusted

step:

  1. Choose an image from your local photo album or take a photo with your camera.

  1. Compress the image (only supports WeChat applet jpg format, H5 or app needs to use canvas)

  1. Convert image format to Base64

uniapp official website address: uni.chooseImage(OBJECT)

Above code:

 uni.chooseImage({
        count: 1,//上传图片数量
        sizeType: ['original', 'compressed'],//可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'],//album 从相册选图,camera 使用相机,默认二者都有
        success: (chooseImageRes) => {
            console.log('chooseImageRes', chooseImageRes);
            //tempFilePaths 图片的本地文件路径列表
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.compressImage({
                src: tempFilePaths[0],
                quality: 10,//图片压缩质量,0~100,默认80,仅对jpg有效
                success: res => {
                    console.log('res', res)
                   //uni.getFileSystemManager() 获取全局唯一的文件管理器
                   // readFile读取文件,可转换编码格式
                    uni.getFileSystemManager().readFile({
                        filePath: res.tempFilePath, // 要读取的文件路径
                        encoding: 'base64',// 编码格式
                        success: function (res) {
                        AppUserData.value.HeadImage = 'data:image/png;base64,' + res.data
                        }
                    })

                }
            })
        }
    });

Guess you like

Origin blog.csdn.net/weixin_45308405/article/details/129090137