Vue3·Uploader 文件上传

上传文件有上传组件和主文件，此文章用于自己记录笔记

以下是上传组件

<template>

	//上传组件
    <div class="upload">
        <div class="title">上传营业执照<span class="xx">*</span></div>
        <div class="upload-img">
            <van-uploader v-model="fileFace" :after-read="faceRead" :before-delete="faceDelete" upload-text="点击上传"
                max-count="1" max-size="512000" :before-read="beforeRead" />
            <div class="limit">只能上传jpg/png文件,且不超过500kb</div>
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted, watch, reactive } from 'vue'
import fileApi from '../../../api/file.api'
import registerAuthApi from '@/api/registerAuth.api'
import { auth } from "@/store/auth";
import { showToast } from 'vant';
const store = auth()

onMounted(() => {
    GetFindById()
}) 


//获取附件   APP
const GetFindById = () => {

    registerAuthApi.findByUserId(store.authInfo.userId).then(res => {

        if (res.code == 200 && res.data) {

            // 查看附件--查看已经上传提交完成的文件--项目中用于浏览
            fileApi.download(res.data.businessLicenseAttachmentId).then(ress => {  //调用相应的接口
                let info = {}
                info.objectUrl = URL.createObjectURL(ress.data);
                let file = new File([ress.data], ress.data.filename, { type: ress.data.type });

                info.file = file

                fileFace.value.push(info);

                let val = {
                    face: info
                }
                emit("OtherInfo", val);

            }).catch(e => { })

        }
    })
}


const files = ref({
    faceFiles: null
})


const fileFace = ref([]);
const faceRead = (file) => {
    files.value.faceFiles = file
};

const faceDelete = (file) => {
    fileFace.value = []

    let val = {
        face: {}
    }
    emit("OtherInfo", val);
}

const beforeRead = (file) => {		//上传之前处理图片
    if(file.size > 512000){
        showToast('上传图片尺寸过大，请上传500kb以内的图片');
        return false;
      }
      return true;
};


const emit = defineEmits(["OtherInfo"])		//传递到父组件


//监听files的变化
watch(
    () => files.value.faceFiles, (newValue) => {
        let val = {
            face: newValue
        }
        emit("OtherInfo", val);

    }, { deep: true }
);


</script>



<style lang="less" scoped>
.upload {
    text-align: center;

    .upload-img {
        margin: 0 auto;
        width: 80%;
        min-height: 120px;
        border-radius: 8px;
        border: 1px solid #E9EBEF;
        padding: 25px;

        .limit {
            color: #606266;
            font-size: 10px;
        }
    }

    .title {
        line-height: 50px;
        margin-top: 8px;

        .xx {
            color: #F56C6C;
            margin-left: 4px;
        }
    }
}
</style>