更新记录

1.2（2025-12-03） 下载此版本

可将图片转为base64字符串，为一些不希望存储文件的场景提供支持

平台兼容性

uni-app(4.62)

介绍

本功能基于轻语API 轻语API提供一键生成二维码、OCR文字识别、通用文档内容识别(pdf/excel/docx/doc等文档格式解析)、语音识别(语音转文字)、文字转语音、随机图库、智能Ai助手、地理编码获取(逆地理编码，从内容中获取地址信息(含经纬度)，从经纬度获取地址信息)等等API

<template>
    <view class="container">
        <!-- 顶部上传按钮 -->
        <view class="upload-section">
            <view @click="pickFile" class="btn">上传图片</view>
        </view>

        <!-- 加载状态 -->
        <view v-if="status === 'loading'" class="loading-section">
            <image src="/static/icon_spinner.png" style="width: 68rpx;height: 68rpx;" class="rotating-element"></image>
            <text class="loading-text">正在转换中...</text>
        </view>

        <!-- Base64字符串显示区域 -->
        <view v-if="base64Str && status === 'success'" class="result-section">
            <view class="section-title">该图片的Base64字符串</view>
            <view class="base64-container">
                <text class="base64-text">{{ base64Str }}</text>
            </view>

            <!-- 操作按钮 -->
            <view class="button-group">
                <view @click="copyBase64" class="action-btn copy-btn">复制Base64</view>
                <view @click="toggleImagePreview" class="action-btn preview-btn">
                    {{ showImage ? '隐藏图片' : '显示图片' }}
                </view>
            </view>

            <!-- 图片预览 -->
            <view v-if="showImage" class="image-preview-section">
                <view class="section-title">图片预览</view>
                <image :src="base64Str" mode="widthFix" class="preview-image" />
            </view>
        </view>
    </view>
</template>

<script>
    // 本demo为图片转Base64接口请求示例：
    // 适用场景：将图片文件转换为Base64编码字符串
    export default {
        data() {
            return {
                base64Str: '', // 存储返回的base64字符串
                status: 'none', // none | loading | success | error
                showImage: false // 是否显示图片预览
            }
        },
        methods: {
            // 请求图片转Base64 API
            requestAPI(path) {
                let that = this;
                that.status = 'loading';
                that.base64Str = '';
                that.showImage = false;

                // 上传文件
                uni.uploadFile({
                    url: 'https://5555api.com/data/api/imageToBase64',
                    filePath: path,
                    name: 'file',
                    formData: {
                        apikey: 'test_app_key_5555api.com',
                    },
                    success: function (uploadRes) {
                        that.status = 'success';
                        let json = JSON.parse(uploadRes.data);

                        // 假设API返回格式为 {data: {data: "base64字符串"}}
                        if (json.data && json.data.base64Str) {
                            that.base64Str = json.data.base64Str;
                            uni.showToast({
                                title: '转换成功',
                                icon: 'success',
                                duration: 2000
                            });
                        } else {
                            that.status = 'error';
                            uni.showToast({
                                title: '转换失败',
                                icon: 'none',
                                duration: 2000
                            });
                        }
                    },
                    fail: function (err) {
                        that.status = 'error';
                        console.error('上传失败:', err);
                        uni.showToast({
                            title: '上传失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            },

            // 选择图片
            pickFile() {
                let that = this;
                uni.chooseImage({
                    count: 1, // 只选择一张
                    sizeType: ['compressed'], // 使用压缩图
                    success: function (res) {
                        var tempFilePaths = res.tempFilePaths;
                        console.log("选择的图片路径：", tempFilePaths[0]);
                        that.requestAPI(tempFilePaths[0]);
                    },
                    fail: function (err) {
                        console.error('选择图片失败:', err);
                        uni.showToast({
                            title: '选择图片失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            },

            // 复制Base64字符串
            copyBase64() {
                let that = this;
                uni.setClipboardData({
                    data: that.base64Str,
                    success: function () {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'success',
                            duration: 2000
                        });
                    },
                    fail: function () {
                        uni.showToast({
                            title: '复制失败',
                            icon: 'none',
                            duration: 2000
                        });
                    }
                });
            },

            // 切换图片预览显示/隐藏
            toggleImagePreview() {
                this.showImage = !this.showImage;
            }
        }
    }
</script>

<style scoped>
.container {
    padding: 40rpx;
    min-height: 100vh;
    background-color: #f5f5f5;
}

.upload-section {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;
}

.btn {
    background-color: #007aff;
    color: white;
    padding: 24rpx 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
    transition: all 0.3s;
}

.btn:active {
    background-color: #0056b3;
    transform: scale(0.98);
}

.loading-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 100rpx;
}

.rotating-element {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
}

.result-section {
    background-color: white;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
}

.base64-container {
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    padding: 20rpx;
    max-height: 300rpx;
    overflow-y: auto;
    margin-bottom: 30rpx;
}

.base64-text {
    font-size: 24rpx;
    color: #666;
    word-break: break-all;
    line-height: 1.6;
    font-family: 'Courier New', monospace;
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
    margin-bottom: 30rpx;
}

.action-btn {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    font-weight: bold;
    transition: all 0.3s;
}

.copy-btn {
    background-color: #4cd964;
    color: white;
    box-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.3);
}

.copy-btn:active {
    background-color: #3ab54a;
    transform: scale(0.98);
}

.preview-btn {
    background-color: #ff9500;
    color: white;
    box-shadow: 0 2rpx 8rpx rgba(255, 149, 0, 0.3);
}

.preview-btn:active {
    background-color: #e68600;
    transform: scale(0.98);
}

.image-preview-section {
    margin-top: 30rpx;
    padding-top: 30rpx;
    border-top: 1px solid #e0e0e0;
}

.preview-image {
    width: 100%;
    max-width: 600rpx;
    border-radius: 8rpx;
    margin-top: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
</style>