input实现文件上传

<template>
    <div>
        <input
            name="file"
            type="file"
            id="file"
            style="display: none"
            @change="handleFileUpload"
        />
        <el-button type="primary" size="default" @click="upload">上传文件</el-button>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        handleFileUpload(event) {
            const file = event.target.files[0];
            if (!file.size)
                return this.$message.error("上传的文件为空文件,请重新上传！");
            if (
                file.name.indexOf(".pdf") === -1 &&
                file.name.indexOf(".docx") === -1 &&
                file.name.indexOf(".doc") === -1 &&
                file.name.indexOf(".txt") === -1
            )
                return this.$message.error("仅支持PDF,Word,Txt格式文件上传！");
            if (window.FileReader) {
                let reader = new FileReader();
                reader.onload = async () => {
                    // 将文件内容转换为Byte[]类型（Uint8Array）
                    const arrayBuffer = reader.result;
                    const byteArray = new Uint8Array(arrayBuffer);
                    // 根据需求 上传成功做的事~~~
                    // 1.可调用上传接口
                    // 2.保存文件byte进制的数据
                    this.$message.success("上传成功!");
                };
                reader.readAsArrayBuffer(file);
            }
        },
        upload() {
            let dom = document.getElementById("file");
            dom.click();
        }
    },
};
</script>

<style>
</style>