【项目实训】基于大模型的小学语数英辅助教育平台 | 基于大模型的中文作文（图像）修改

        之前已经实现了中英文文本形式输入的作文修改，本节实现用户输入图片类型的作文，给出修改结果。

        基本的前端展示以及后端对于获取到的数据处理与文本数据基本一致，不同之处在于前端对于用户输入数据的存取和后端请求之间的安排，以及后端对于前端数据的接收方式。

 一、前端

        前端使用handleFileChange（）函数来监听用户是否有上传文件的行为，如果监听到一个事件，判断是否上传了文件，若上传则将文件存到变量中，没有则return继续监听。

<input type="file" ref="fileInput" style="display: none" @change="handleFileChange"/>

handleFileChange(event){
        const file = event.target.files[0];
        this.imageisloaded = true;
        if (!file) return;
        this.file = file;
    }

        之后获取用户输入的等级等信息，都获取到后以键值对形式传入后端即可

二、前后端接口函数

        对于上传的图像数据，首先要对文件类型进行检查，如果上传的不是支持的图像类型则拒绝上传和处理。如果通过处理则按照之前逻辑创建FrameData对象并发送请求

//上传中文作文图片
export const upload_picture_chinese = params => {
    let contentType;
    if (params.type === 'image/png') {
        contentType = 'image/png';  // 设定PNG图片的MIME类型
    } else if (params.type === 'image/jpeg') {
        contentType = 'image/jpeg'; // 设定JPEG图片的MIME类型
    } else {
        // 如果文件类型不是PNG或JPEG，则拒绝上传
        return Promise.reject(new Error("Unsupported file type"));
    }

    // 创建 FormData 对象，并将文件和文件类型添加到其中
    const formData = new FormData();
    formData.append('file', params.file); // 假设params对象中含有file属性
    formData.append('grade', params.grade);
    console.log(params.grade)

    return axios({
        method: 'post',
        url: `http://localhost:8088/essay/Chinese_image`,
        data: formData,
        headers: {
//            'Content-Type': contentType,
            'Authorization': `Bearer xxxxx`,  // 保证替换为实际的Token
        }
    }).then(res => res.data);
}

 三、后端

        后端对于图像数据的接收如下

def Chinese_image(file: UploadFile = File(...), grade: str = Form(...))

        对于图像数据，本地图片无法被读取，需要将其本地图片读取到后编码为字节流才能传递给接口处理

picture = await file.read()
    if (grade == "default"):
        data = {'q': str(base64.b64encode(picture), 'utf-8')}
    else:
        data = {'q': str(base64.b64encode(picture), 'utf-8'), 'grade': grade}