Vue3图片上传

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>编辑资料</span>
            </div>
        </template>
        <el-form
                label-width="90px"
                :model="dataForm"
                :rules="dataFormRule"
                ref="dataFormRef"

        >
            <el-row>
                <el-col :span="12" style="padding: 20px;">
                    <el-divider>学生基本信息</el-divider>
                    <el-form-item label="学号" prop="sno">
                        {{dataForm.sno}}
                    </el-form-item>
                    <el-form-item label="姓名" prop="realname">
                        <el-input v-model="dataForm.realname"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio label="男" v-model="dataForm.sex">男</el-radio>
                        <el-radio label="女" v-model="dataForm.sex">女</el-radio>
                    </el-form-item>
                    <el-form-item label="出生日期" prop="borth">
                        <el-input v-model="dataForm.borth" type="date"></el-input>
                    </el-form-item>
                    <el-divider>联系方式</el-divider>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="dataForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="微信" prop="wx">
                        <el-input v-model="dataForm.wx" ></el-input>
                    </el-form-item>
                    <el-divider>宿舍信息</el-divider>

                    <el-form-item  label="宿舍"  >
                        {{dataForm.room}}
                    </el-form-item>

                </el-col>
                <el-col :span="12" style="padding: 20px;">

                    <el-divider>学院信息</el-divider>

                    <el-form-item  label="学院"  >
                        {{dataForm.college}}
                    </el-form-item>
                    <el-form-item  label="专业" >
                        {{dataForm.major}}
                    </el-form-item>
                    <el-form-item  label="班级"  >
                        {{dataForm.cname}}
                    </el-form-item>
                    <el-divider>电子照</el-divider>
                    <el-form-item label="上传电子照" >
                        <el-upload

                                drag
                                :before-upload="beforeUploadFile"
                                :show-file-list="false"
                                :action=FILE_ACTION
                                :on-success="handleFileSuccess"
                                accept="image/*"
                                :multiple="false">

                            <img v-if="dataForm.photo!=null&&dataForm.photo!=''" :src="'api'+dataForm.photo"
                                 style="max-width: 100px"/>
                            <p v-else>点击上传</p>

                        </el-upload>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-button style="margin-left: 100px;" type="primary" @click="submitForm">确 定</el-button>

        </el-form>




    </el-card>




</template>

<script setup>

    import {onMounted, ref} from 'vue'
    import {ElMessage} from 'element-plus'
    import axios from 'axios'
    import {useRouter} from 'vue-router'


    const router = useRouter()

    const FILE_ACTION = ref('');
    const dataFormRef = ref(null)
    const dataForm = ref({
        id: '',
        realname: '',
        sex: '',
        borth: '',
        phone: '',
        wx: '',


    })
    const dataFormRule = {

        realname: [{required: true, trigger: 'blur', message: '不能为空'},],
        sex: [{required: true, trigger: 'blur', message: '不能为空'},],


    }

    const submitForm = () => {
        dataFormRef.value.validate((valid) => {
            if (valid) {
                axios({
                    method: 'post',
                    url: '/api/student/save',
                    params: dataForm.value
                }).then(res => {
                    if (res.status == 1) {

                        ElMessage.success(res.msg)
                        getinfo();

                        setTimeout(()=>{ window.location.reload();},500)

                    } else {
                        ElMessage.error(res.msg)
                    }
                })
            } else {
                ElMessage.error("数据校验不通过")
            }
        })

    }

    const getinfo = () => {
        let id=JSON.parse(localStorage.loginUser).id;
        axios({
            method: 'post',
            url: '/api/student/info',
            params: {id:id}
        }).then(res => {
            if (res.status == 1) {
                dataForm.value.id=res.obj.id;
                dataForm.value.sno=res.obj.sno;
                dataForm.value.realname=res.obj.realname;
                dataForm.value.sex=res.obj.sex;
                dataForm.value.borth=res.obj.borth;
                dataForm.value.phone=res.obj.phone;
                dataForm.value.room=res.obj.room;
                dataForm.value.wx=res.obj.wx;
                dataForm.value.role=res.obj.role;
                dataForm.value.college=res.obj.college;
                dataForm.value.major=res.obj.major;
                dataForm.value.cname=res.obj.cname;
                dataForm.value.photo=res.obj.photo;

                localStorage.loginUser=JSON.stringify(res.obj);


            } else {
                ElMessage.error(res.msg)
            }
        })

    }
    const beforeUploadFile = () => {
        FILE_ACTION.value = "api/student/upphoto?id=" + dataForm.value.id
    }
    const handleFileSuccess = (res) => {
        ElMessage.success(res.msg)
        dataForm.value.photo = res.obj;
        getinfo();
        setTimeout(()=>{ window.location.reload();},500)
    }
    onMounted(() => {
        dataForm.value=JSON.parse(localStorage.loginUser);
        getinfo();
    })
</script>

<style scoped>
.inpsel{width: 320px;margin-right: 10px;}
</style>