vue3图片上传

<template>
    <div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
            <!-- link -->
            <el-form-item label="链接" prop="link">
                <el-input v-model="ruleForm.link" placeholder="请输入link" />
            </el-form-item>
            <!-- alt -->
            <el-form-item label="名称" prop="alt">
                <el-input v-model="ruleForm.alt" placeholder="请输入图片名称" />
            </el-form-item>
            <!-- 图片 -->
            <el-form-item label="图片" prop="img">
                <el-upload class="avatar-uploader" :show-file-list="false" :http-request="uploadFn">
                    <img v-if="ruleForm.img" :src="ruleForm.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <!-- base64 -->
            <el-form-item label="link" prop="img">
                <el-input v-model="ruleForm.img" placeholder="图片自动转成base64" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'
const router = useRouter()
// 导入页面权限
import { noPermission } from '@/utils/nopermission'
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
// 导入添加轮播图接口
import { addBannerApi } from '@/api/banner'
noPermission()
// 添加轮播图
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
    img: string
    alt: string
    link: string
}
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    img: '',
    alt: '',
    link: ''
})
// 非空
const rules = reactive<FormRules<RuleForm>>({
    img: [
        { required: true, message: 'img不能为空', trigger: 'blur' }
    ],
    alt: [
        { required: true, message: 'alt不能为空', trigger: 'blur' }
    ],
    link: [
        { required: true, message: 'link不能为空', trigger: 'blur' }
    ]
})
// 图片上传
const uploadFn = (data: any) => {
    // console.log('data', data.file); // type:"image/jpeg"
    if (!["image/jpeg", "image/jpg", "image/png"].includes(data.file.type)) {
        // 不符合格式
        ElMessage({
            message: '图片规格为jpeg、jpg、jpeg格式,您上传图片不符合规范',
            type: 'error'
        })
        return false
    } else if (data.file.size / 1024 >= 50) {
        ElMessage.error('图片大小不能超过50KB!')
        return false
    }
    // 上面条件都满足
    /*                         创建一个文件接收器                                */
    const reader = new FileReader()
    // 上传的图片读取为base64格式
    reader.readAsDataURL(data.file)
    // 监听读取过程
    reader.onload = function () {
        // console.log(this.result);
        ruleForm.img = this.result as string
    }

}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            addBannerApi(ruleForm).then((res: any) => {
                console.log('res', res);
                ElMessage({
                    message: res.message,
                    type: res.code == 200 ? 'success' : 'error',
                    duration: 1000,
                    onClose() {
                        if (res.code == 200) {
                            // 跳转到轮播图列表页
                            router.push('/banner/bannerlist')
                        }
                    }
                })
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
            return false
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped>
.el-form {
    width: 500px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>