通过原生js实现文件上传

通过原生js实现文件上传

<template>
    <div class="import-dialog">
        <!-- 导入弹出框 -->
        <a-modal :title="rowObj.batch_name + '批次样本导入'" :visible="isImportShow" @cancel="handleCancel" :footer="null"
            :width="680">
            <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }" @submit="submitBtn">
                <a-form-item label="批次id: ">{{ rowObj.batch_id }}</a-form-item>
                <a-form-item label="批次名: ">{{ rowObj.batch_name }}</a-form-item>
                <a-form-item label="总侵权数量: ">
                    <a :href="baseUrl"><a-button type="primary" icon="download">模板下载</a-button></a>
                </a-form-item>
                <a-form-item label="导出类型: ">
                    <input ref="fileInputRef" type="file" @change="handleFileChange" v-show="false">
                    <a-button type="primary" icon="upload" @click="changeFile">选择文件</a-button>
                    {{ fileName }}
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                    <!-- 提交按钮 -->
                    <a-button type="primary" html-type="submit">提交</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import { importSubmit } from '@/api/dataMonitoring/batchinfo.js'
import httpURL from '@/pages/global_URL.vue'

export default {
    name: 'ImportDialog',
    props: {
        isImportShow: {
            type: Boolean,
            default: false
        },
        rowObj: {
            type: Object
        }
    },
    data() {
        return {
            // 导出的form表单
            form: this.$form.createForm(this, { name: 'coordinated' }),
            baseUrl: httpURL.httpURL + '/batch/download_import_file/',
            file: null,
            fileName: '',
        };
    },
    created() { },
    methods: {
        handleFileChange(event) {
            this.file = event.target.files[0]
            this.fileName = event.target.files[0].name
        },
        changeFile() {
            this.$refs.fileInputRef.click()
        },
        // 立即提交
        submitBtn(e) {
            e.preventDefault();
            this.form.validateFields(async (err) => {
                if (!err) {
                    const formData = new FormData()
                    formData.append('file', this.file)
                    formData.append('home_page_differentiation', this.rowObj.home_page_differentiation)
                    formData.append('batch_id', this.rowObj.batch_id)
                    formData.append('batch_platform_id', this.rowObj.batch_platform_id)
                    formData.append('batch_name', this.rowObj.batch_name)
                    try {
                        const res = await importSubmit(formData)
                        console.log('res', res);
                        if (res && res.data && res.data.code === 200) {
                            this.$message.success('批次样本导入成功')
                            this.handleCancel()
                        } else {
                            this.$message.error('导入失败,请稍后重试')
                        }
                    } catch (err) {
                        console.log(err);
                    }
                }
            });
        },
        handleCancel() {
            this.form.resetFields();
            this.$emit('closeDialog')
        },
    },
}
</script>
<style lang="less" scoped></style>

实现效果:

ok咯.